为什么边距在'display: table-cell”元素上不起作用？

元素对边距不敏感

问题

格式化显示的相邻 div ：表格单元格；即使设置为 5px，也不会受到 margin 属性的影响。

说明

根据 MDN 文档，margin 属性不适用于元素具有除 table-caption、table 和 inline-table 之外的表格显示类型。因此，它不会影响具有 display:table-cell 的元素。

解决方案

要在这些元素之间实现间距，请使用 border-spacing 属性。但是，这需要对父元素应用 display:table 和 border-collapse:separate。

例如：

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

.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 属性并调整border-collapse 和显示设置，您可以有效地在样式为显示的 div 元素之间创建边距： table-cell;.

高级功能

正如 Diego Quirós 所指出的，border-spacing 属性允许您为水平轴和垂直轴定义不同的边距值。例如：

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

以上是为什么边距在'display: table-cell”元素上不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！