왜 "display : table-cell;"div가 있습니까? 마진의 영향을받지 않습니까?

나는이 div서로 옆 요소 display: table-cell;.

나는 margin그들 사이 에 설정하고 싶지만 margin: 5px효과가 없습니다. 왜?

내 코드 :

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

원인

에서 MDN이 문서 :

[여백 속성]은 테이블 캡션, 테이블 및 인라인 테이블 이외의 테이블 표시 유형을 가진 요소를 제외한 모든 요소에 적용됩니다.

즉, margin속성은 요소에 적용 할 수 없습니다display:table-cell .

해결책

border-spacing대신 속성 사용을 고려하십시오 .

display:table레이아웃이 있는 부모 요소에 적용되어야합니다 border-collapse:separate.

예를 들면 다음과 같습니다.

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

jsFiddle 데모 보기

가로 및 세로 여백이 다름

Diego Quirós가 언급했듯이이 border-spacing속성은 수평 및 수직 축에 대해 서로 다른 여백을 설정하기 위해 두 값을 허용합니다.

예를 들어

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

내부 div를 사용하여 여백을 설정할 수 있습니다.

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS 피들

표 셀은 여백을 존중하지 않지만 대신 투명한 테두리를 사용할 수 있습니다.

div {
  display: table-cell;
  border: 5px solid transparent;
}

참고 : 여기서 백분율을 사용할 수 없습니다 ... :(

이처럼 서로 div가 있다면

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

이 작동합니다!