为什么带有"display: table-cell;"属性的div不受margin影响？

Question

我有一些相邻的含有 display: table-cell; 样式的 div 元素。

我想在它们之间设置 margin，但是使用 margin: 5px 没有任何效果。为什么？

我的代码：

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

- user1929946

Answer 1

原因

来自 MDN 文档：

[margin 属性] 适用于除 table-caption、table 和 inline-table 之外的所有元素

换句话说，margin 属性不适用于 display:table-cell 元素。

解决方案

考虑使用 border-spacing 属性。

请注意，它应该应用在具有 display:table 布局和 border-collapse:separate 的父元素上。

例如：

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

查看 jsFiddle演示

---

水平和垂直方向的不同边距

Diego Quirós提到，border-spacing属性还可以接受两个值来设置水平和垂直轴的不同边距。

例如：

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

- Boaz

---

谢谢！如果需要水平和垂直间距不同，还可以使用这个符号表示边框间距：border-spacing: horizontal vertical; - Diego Quirós

我以为我发现了一个Bug，结果发现我需要学习更多的CSS。 - Pete Alvin

我猜这个并没有处理特定的左/右/上/下边距？而且没有办法让特定的表格单元格与其他单元格有不同的填充吗？ - Nathan

@Nathan 可以为任何必要的选择器（例如类或ID）设置 padding，与通常情况下一样。如果您指的是单元格之间的 margin，那么可以通过将两个值设置为 border-spacing 来单独设置垂直和水平轴上的距离，但它将应用于整个表格而不是单个单元格。 - Boaz

Answer 2

您可以使用内部的div来设置边距。

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

- urmurmur

---

如果您想在单元格之间添加边距而不是左侧或右侧，则这是一个好主意。然后，您的CSS可能类似于.inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }。但请注意这个问题：此示例的红色和绿色背景可能不会匹配高度，因为它们不在单元格上。 - Henrik N

Answer 3

表格单元格不会遵循外边距，但您可以使用透明边框代替：

div {
  display: table-cell;
  border: 5px solid transparent;
}

注意：您不能在此处使用百分比... :(

- Chris Happy

Answer 4

如果你有像这样并排的 div 元素：

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

这应该可以工作！

- user123_456

---

好的，但如果他想要两个高度相等的 div 呢？使用浮动无法实现这一点。 - hieroshima

这就是为什么 JS 如此棒 :) - Chris Happy

@ChrisHappy 当有 CSS 解决方案时，永远不要使用 JavaScript。否则你的代码会变得臃肿。 - ssc-hrep3

随着响应式设计需求的增加，笨重的CSS解决方案已经不再足够... - Chris Happy

它们足够了，尤其是具有响应式需求。只要看一下flexbox，它现在被大多数主流浏览器支持，并且可以非常轻松地解决这个确切的问题。布局样式永远不应该由JavaScript完成。 - ssc-hrep3

@ssc-hrep3 我回来看这个问题，意识到我之前是多么的错误。非常抱歉我的傲慢，并感谢你对我的耐心。 - Chris Happy

Answer 5

我也在寻找如何使用 display: table-cell; (使高度相等) 并且拥有 left-margin。没有提出的解决方案适用于我。因此，我采用了一个不太优雅但可行的解决方法 - 我只是添加了一个具有所需边距大小宽度的 display: table-cell; 的 span 元素。虽然不太优雅，但它确实起作用。

- Saulius