为什么边距对 CSS 表格单元格不起作用，如何添加间距？

表格单元格的边距

在 CSS 中，当您将元素的 display 属性设置为 table-cell 时，您正在创建一个类似表格的结构。但是，表格单元格不受边距属性的影响。 margin 属性设置元素边框之外的空间，但表格单元格默认没有边框。

原因

根据 MDN 文档， margin 属性适用于除 table-caption、table 和 inline-table 之外的表格显示类型的元素之外的所有元素。因此，由于 table-cell 不是豁免的表格显示类型之一，因此 margin 属性对其不适用。

解决方案

达到想要的效果表格单元格之间的间距，请改用 border-spacing 属性。 border-spacing 属性设置相邻表格单元格边框之间的间距。它应该应用于具有 display:table 布局和 border-collapse:separate 的父元素。

<br>HTML:<br><div>
<pre class="brush:php;toolbar:false"><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 接受两个值来设置不同的边距如果需要，水平轴和垂直轴。