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