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

我有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>

原因

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

参见jsFiddle演示

水平和垂直的边距不同

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

例如

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

您可以使用内部div设置边距。

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

JS小提琴

表格单元格不考虑边距，但是您可以改用透明边框：

div {
  display: table-cell;
  border: 5px solid transparent;
}

注意：您不能在此处使用百分比... :(

如果您有div这样彼此相邻

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

这应该工作！