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

我这里有两个 div：

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

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

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

您可以使用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 演示

还有其他选择吗？

Well， 并不真地。

Why?

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