为什么边距在带有'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

</p>
<div><div class="code" style="position:relative; padding:0px; margin:0px;"><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>