「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デモを見る

水平方向と垂直方向のマージンが異なる

DiegoQuirósが述べたように、このborder-spacingプロパティは2つの値を受け入れて、水平軸と垂直軸に異なるマージンを設定します。

例えば

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

これはうまくいくはずです！