html - 「display: table-cell;」を含む div はなぜですか? マージンの影響を受けませんか？

Question

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

Answer 1

内部 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フィドル

Answer 2

このように隣同士にdivがある場合

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

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

</div>

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