html - display:table-cell を使用すると、div 間にスペースを入れることができません

Question

3 つの div を並べて配置したい。display:tableそのため、親の div とdisplay:table-cell内側の 3 つのdivに慣れていました。

最初の 2 div の幅はわかっていますが、3 番目の div の幅は不明です。そのためdisplay:table-cell、3 番目の div の幅を調整するのに完全に機能します。

margin-leftまたはを使用して 3 つの div の間に間隔を空けたい場合margin-right、効果はありません。ここでコードを確認してください。

それができるかどうか教えてください。前もって感謝します。

Answer 1

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

 #wrapper div {
      display: table-cell;
      height:100px;
      /* creates space */
      border:5px solid transparent;
      background-clip:padding-box;
  }

別のボックスモデルを設定して、要素の幅に境界線を含めることができます:

box-sizing:border-box;

Answer 2

これを試して

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
    background-color:Gray;
    border-spacing:10px;
}

デモ。

Answer 3

のようなスペースを与えるには、border プロパティを使用します。

border:solid 10px transparent;

Answer 4

表のセルにマージンを設定することはできません。透明な境界線を使用して少し調整できます。それで問題が解決しない場合は、他に方法はありません。