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演示

还有其他选择吗？

好吧,不是真的.

为什么？

• margin财产不适用于display: table-cell要素.
• padding 属性不会在单元格边缘之间创建空间.
• floatproperty会破坏table-cell元素的预期行为,这些元素可以与其父元素一样高.

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;,否则表格单元格的背景颜色将显示在边框上.

IE9向上(以及所有其他现代浏览器)支持透明边框和背景剪辑.如果您需要IE8兼容性或者不需要实际的透明空间,您可以简单地设置白色边框颜色并将其保留background-clip.