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

Question

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

Answer 1

原因

来自the MDN documentation：

  

[margin属性]适用于除元素之外的所有元素   table-caption，table和inline-table

以外的表显示类型

换句话说，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 demo

---

横向和纵向不同的边距

如DiegoQuirós所述，border-spacing属性也接受两个值来为水平轴和垂直轴设置不同的边距。

例如

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

Answer 2

您可以使用内部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 Fiddle

Answer 3

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

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

注意：你不能在这里使用百分比...... :(

Answer 4

如果你有这样的div，就像这样

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

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

</div>

这应该有效！