为什么边距不能在带有 `display: table-cell;` 的 div 上工作？

为什么div不能带有“display: table-cell;”应用边距？

在 HTML 中，div 是可以使用 CSS 布局设置（如“显示”）进行排列的相邻元素。当分配“display: table-cell;”时，这些 div 的行为就像表格中的单元格一样，并继承特定的属性。其中一个属性就是 margin 属性的无效。

原因：与“display: table-cell;”不兼容

根据 MDN 文档，margin 不适用于具有表格显示类型的元素除了“table-caption”、“table”和“inline-table”之外。 “显示：表格单元格；”属于此异常，使其与边距不兼容。

解决方案：Border-Spacing 属性

不要使用边距，而是考虑应用 border-spacing 来实现 div 之间的间距。但是，此属性必须应用于具有“display: table”布局和“border-collapse:”的父元素。

示例：

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 Quieros提到的，边框间距支持两个值来为水平轴和垂直轴创建不同的边距。

示例：

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

以上是为什么边距不能在带有 `display: table-cell;` 的 div 上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！