為什麼邊距在「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中文網其他相關文章！