CSS 테이블 레이아웃 : 테이블 행이 여백을 허용하지 않는 이유는 무엇입니까?

CSS 테이블 레이아웃 : 테이블 행이 여백을 허용하지 않는 이유는 무엇입니까?

---

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

내 질문은 HERECSS에 표시된 줄 과 관련이 있습니다. 행이 너무 가깝다는 것을 알았으므로 아래쪽 여백을 추가하여 분리하려고했습니다. 불행히도 작동하지 않습니다. 행을 분리하기 위해 표 셀에 여백을 추가해야합니다.

이 행동의 이유는 무엇입니까?

또한이 전략을 사용하여 내가하는 것처럼 레이아웃을 수행해도됩니까?

[icon] - text      [icon] - text
[icon] - text      [icon] - text

아니면 더 나은 전략이 있습니까?

---

CSS 2.1 표준, 섹션 17.5.3을 참조하십시오. 을 사용할 때 display:table-rowDIV의 높이는 그 안에있는 table-cell요소 의 높이에 의해서만 결정됩니다 . 따라서 해당 요소의 여백, 패딩 및 높이는 효과가 없습니다.

http://www.w3.org/TR/CSS2/tables.html

---

(실제 테이블 사용) 해결 방법은 어떻습니까?

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

It's not as dynamic, since you have to explicitly set the color of the border (unless there's a way around that too), but this is something I'm experimenting with on a project of my own.

Edit to include comments regarding transparent:

tr.row {
    border-bottom: 30px solid transparent;
}

---

The closest thing I've seen would be to set border-spacing: 0 30px; to the container div. However, this just leaves me with space on the upper edge of the table, which defeats the purpose, since you wanted margin-bottom.

---

Have you tried setting the bottom margin to .row div, i.e. to your "cells"? When you work with actual HTML tables, you cannot set margins to rows, too - only to cells.

---

There is a pretty simple fix for this, the border-spacing and border-collapse CSS attributes work on display: table.

You can use the following to get padding/margins in your cells.

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

Note that you have to have

border-collapse: separate;

Otherwise it will not work.

---

Fiddle

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

this can be another solution

---

Add spacer span between two elements, then make it unvisible:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

---

Works - Add Spacing To Table

#options table {
  border-spacing: 8px;
}

---

adding a br tag between the divs worked. add br tag between two divs that are display:table-row in a parent with display:table

참고URL : https://stackoverflow.com/questions/1993277/css-table-layout-why-does-table-row-not-accept-a-margin