為什麼邊距在帶有'display: table-cell;”的 Div 上不起作用以及如何添加間距？

Margin 屬性不會影響有「display: table-cell;」的Div

在HTML 中，我們可能會遇到這樣的情況：帶有「display: table-cell;」的div 元素缺少margin 屬性所引入的預期間距。

原因

margin 屬性與展示除 table-caption、table 或 table-caption 以外的顯示類型的元素不相容於內聯表。可惜的是，display: table-cell 不屬於這些例外情況。

解

要規避此限制，請考慮使用 border-spacing 屬性作為替代方案。然而，將 border-spacing 應用於具有 display: table 佈局的父元素是至關重要的，並伴隨 border-collapse：分開。

HTML

<div>
<pre class="brush:php;toolbar:false"><div>

&l t;/div>

CSS

.row {display:table-row; }<br>.cell {display:table-cell;padding:5px;border:1px Solid black;}<br>

透過此設置，您可以在 div 元素之間添加間距。

水平和垂直邊距變體

此外，border-spacing 屬性允許透過指定兩個不同的值沿水平軸和垂直軸使用獨立的邊距值。

.../border-spacing:3px 5px;} /<em> 水平 3px，垂直 5px </em>/<br>