为什么div带有“ display：table-cell;” 不受保证金影响？

小编典典

为什么div带有“ display：table-cell;” 不受保证金影响？

html

我的div元素彼此相邻display: table-cell;。

我想margin在它们之间进行设置，但margin: 5px没有效果。为什么？

我的代码：

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

阅读 305

2020-05-10

共1个答案

小编典典

原因

从MDN文档中：

[margin属性]适用于除表标题，表和内联表以外的其他表显示类型的元素以外的所有元素

换句话说，该margin物业是不适用display:table-cell的元素。

解

考虑border-spacing改为使用该属性。

请注意，应将其应用于具有display:table布局和的父元素border-collapse:separate。

例如：

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;}

水平和垂直方向的边距不同

正如迭戈·基洛斯（DiegoQuirós）所提到的，该border-spacing属性还接受两个值来为水平和垂直轴设置不同的边距。

例如

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

2020-05-10