html - div 之间的空间 - 显示表格单元格

Question

我这里有两个 div:

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

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

有没有办法在这两个 div(具有 display:table-cell)之间留出空间？

Answer 1

您可以使用 border-spacing属性:

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

还有其他选择吗？

嗯，不是真的。

为什么？

• margin 属性 is not applicable 显示:table-cell 元素。
• padding 属性不会在单元格的边缘之间创建空间。
• float 属性破坏了 table-cell 元素的预期行为，这些元素能够与其父元素一样高。