221

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

5 回答 5

319

原因

从MDN 文档：

【边距属性】适用于除了table-caption、table和inline-table以外的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 演示

水平和垂直边距不同

正如 Diego Quirós 所提到的，该border-spacing属性还接受两个值来为水平轴和垂直轴设置不同的边距。

例如

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
于 2013-05-06T12:35:43.943 回答
22

您可以使用内部 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小提琴

于 2014-10-06T08:36:37.097 回答
9

表格单元格不尊重边距，但您可以改用透明边框：

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

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

于 2017-01-26T23:18:37.490 回答
2

如果你像这样彼此相邻有 div

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

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

</div>

这应该工作！

于 2013-05-06T12:34:32.480 回答
0

我也在寻找如何使用display: table-cell;（以便使高度相等）并且还有left-margin. 没有建议的解决方案对我有用。所以我来到了我的转储解决方法 - 我只是添加了一个display: table-cell;宽度为所需边距大小的跨度。不优雅，但它有效。

于 2021-10-15T18:16:36.127 回答