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;
}

还有其他选择吗？

好吧 ，不是真的。

为什么？

• margin属性不适用于display: table-cell元素。
• padding 属性不会在单元格的边缘之间创建空间。
• float属性破坏了table-cell能够与其父元素一样高的元素的预期行为。