CSS 표 레이아웃 : 왜 table-row가 여백을 허용하지 않습니까?

Question

.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>

내 질문은 CSS에서 HERE 표시 줄에 상대적입니다. 나는 행이 서로 너무 가깝다는 것을 알았 기 때문에 그들을 구분하기 위해 아래쪽 여백을 추가하려고했습니다. 불행히도 그것은 작동하지 않습니다. 행을 구분하기 위해 표 셀에 여백을 추가해야합니다.

이 문제의 원인은 무엇입니까? 또한

, 내가 뭐하는 거지로는하고 설계를 수행하기 위해이 전략을 사용하는 것이 괜찮 :

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

또는 더 나은 전략은 무엇입니까?

Answer 1

CSS 2.1 표준 17.5.3 절을 참조하십시오. display:table-row을 사용할 때 DIV 높이는 그 안에있는 table-cell 요소의 높이에 의해서만 결정됩니다. 따라서 여백, 채우기 및 높이는 영향을 미치지 않습니다.

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

Answer 2

하단 여백을 .row div 즉 "셀"로 설정 했습니까? 실제 HTML 표를 사용하여 작업 할 때 셀에 대해서만 행에 여백을 설정할 수 없습니다.

Answer 3

내가 본 가장 가까운 것은 컨테이너 사업부에 border-spacing: 0 30px;를 설정하는 것입니다. 그러나, 이것은 단지 테이블의 상단 가장자리에 공간을 남겨 둡니다. 그 이유는 당신이 마진 바닥을 원했기 때문에 목적을 저지합니다.

Answer 4

어째서 (실제 테이블을 사용하여)이 문제를 해결할 수 있습니까?

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

당신이 (너무 그 주위에 방법이없는 한) 명시 적 테두리의 색상을 설정해야하기 때문에 그것은 동적 아니지만, 이것은 내가 내 자신의 프로젝트를 실험하고있어 무언가이다.

편집는 "투명"에 대한 주석을 포함합니다 :

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

Answer 5

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 

이 될 수있는 다른 솔루션이에 대한 매우 간단한 수정이

Answer 6

의 border-spacing을 및 border-collapse CSS 속성이 작동합니다 display: table;

다음을 사용하여 셀에 여백/여백을 얻을 수 있습니다.당신이이

.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>

참고

border-collapse: separate; 

가 그렇지 않으면 작동하지 않습니다해야합니다.

Answer 7

근무하는 div간에 br 태그를 추가하십시오. 디스플레이가있는 두 div 사이에 br 태그를 추가하십시오. 디스플레이가있는 상위의 table-row