html - div 間のスペース - テーブルセルを表示

Question

ここに 2 つの div があります。

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

これらの 2 つの div (がある) の間にスペースを作る方法はありdisplay:table-cellますか?

Answer 1

You can use border-spacing property:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

Any other option?

Well, not really.

Why?

• margin property is not applicable to display: table-cell elements.
• padding property doesn't create space between edges of the cells.
• float property destroys the expected behavior of table-cell elements which are able to be as tall as their parent element.

Answer 2

可能であれば、透明な境界線を使用してください。

JSFiddleデモ

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

説明

受け入れられた回答が示唆するように、プロパティを使用できますがborder-spacing、これにより、テーブル セル間にスペースが生成されるだけでなく、テーブル セルとテーブル コンテナーの間にもスペースが生成されます。これは望ましくない場合があります。

表のセルに境界線を表示する必要がない場合は、transparent境界線を使用してセルの余白を生成する必要があります。透明な境界線を設定する必要がありますbackground-clip: padding-box;。そうしないと、テーブル セルの背景色が境界線に表示されるためです。

透明な境界線と background-clip は、IE9 以上 (および他のすべての最新ブラウザー) でサポートされています。IE8 との互換性が必要な場合、または実際の透明なスペースが必要ない場合は、単純に白い境界線の色を設定して、省略できますbackground-clip。