[解決済み】「display: table-cell;」を指定したdivは、なぜmarginの影響を受けないのでしょうか？

質問

私は 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プロパティは、以下の要素を除くすべての要素に適用されます。 table-caption、table、inline-table 以外の表形式で表示する。

つまり 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 プロパティは、横軸と縦軸に異なるマージンを設定するために、2つの値も受け入れます。

例えば

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