为什么边距对表格单元格元素不起作用？-css教程-PHP中文网

为什么边距对表格单元格元素不起作用？

Patricia Arquette

发布： 2024-12-18 15:11:14

原创

163 人浏览过

Why Doesn't Margin Work on Table-Cell Elements?

为什么 Table-Cell 元素的 Margin 失败？

尽管将 margin: 5px 分配给带有 display: table-cell 的相邻 div 元素，但没有出现 margin。这是什么原因？

了解原因

根据 MDN 文档，margin 属性排除了除 table-caption、table 和 inline-table 之外的表格显示类型的元素。因此，边距对于具有 display: table-cell 的元素无效。

解决问题

不要使用边距，请考虑使用 border-spacing 属性。此属性适用于具有 display: table 布局和 border-collapse: alone 的父元素。

示例代码

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

登录后复制

自定义边距值

border-spacing 属性也可以采用两个值，允许不同的水平和垂直边距。

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

登录后复制

以上是为什么边距对表格单元格元素不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！