"디스플레이: 테이블 셀;"이 있는 디브가 마진의 영향을 받지 않는 이유는 무엇입니까?

"디스플레이: 테이블 셀;"이 있는 디브가 마진의 영향을 받지 않는 이유는 무엇입니까?

있습니다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 property]는 테이블 캡션, 테이블 및 인라인 테이블 이외의 테이블 표시 유형을 가진 요소를 제외한 모든 요소에 적용됩니다.

다시 말해, 그.margin속성이 적용되지 않습니다.display:table-cell요소들.

해결책

대신 부동산을 사용하는 것을 고려해 봅니다.

다음과 같은 상위 요소에 적용해야 합니다.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 데모 참조

---

수평과 수직으로 다른 마진

디에고 퀴로스가 언급한 바와 같이,border-spacingproperty는 수평축과 수직축에 대해 다른 여백을 설정하기 위해 두 개의 값도 사용합니다.

예를들면

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

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

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

이거는 될 거예요!

저도 사용법을 찾고 있었습니다.display: table-cell;(같은 높이로 만들기 위해) 또한 가지고 있습니다.left-margin. 어떤 제안된 해결책도 제게 효과가 없었습니다.그래서 저는 제 쓰레기 처리장으로 왔습니다 - 저는 단지 한 번 더 추가했습니다.display: table-cell;필요한 크기의 여유 폭을 가질 수 있습니다.우아하진 않지만 효과는 있습니다.

언급URL : https://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin