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

Question

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

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

原因从MDN文档：[margin属性]适用于除table-caption，table和inline-table之外的表显示类型的元素以外的所有元素换句话说，该margin物业是不适用display:table-cell的元素。解请考虑使用该border-spacing属性。请注意，它应该应用于具有display:table布局和的父元素border-collapse:separate。例如：HTML<div&nbsp;class="table"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cell">123</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cell">456</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cell">879</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>CSS.table&nbsp;{display:table;border-collapse:separate;border-spacing:5px;}.row&nbsp;{display:table-row;}.cell&nbsp;{display:table-cell;padding:5px;border:1px&nbsp;solid&nbsp;black;}请参阅jsFiddle演示水平和垂直不同的边距正如DiegoQuirós所提到的，该border-spacing属性还接受两个值来设置水平轴和垂直轴的不同边距。例如.table&nbsp;{/*...*/border-spacing:3px&nbsp;5px;}&nbsp;/*&nbsp;3px&nbsp;horizontally,&nbsp;5px&nbsp;vertically&nbsp;*/

Answer 2

您可以使用内部div来设置边距。<div&nbsp;style="display:&nbsp;table-cell;"> &nbsp;&nbsp;&nbsp;<div&nbsp;style="margin:5px;background-color:&nbsp;red;">1</div></div><div&nbsp;style="display:&nbsp;table-cell;&nbsp;"> &nbsp;&nbsp;<div&nbsp;style="margin:5px;background-color:&nbsp;green;">1</div></div>JS小提琴

Answer 3

表格单元格不考虑边距，但您可以使用透明边框：div&nbsp;{ &nbsp;&nbsp;display:&nbsp;table-cell; &nbsp;&nbsp;border:&nbsp;5px&nbsp;solid&nbsp;transparent;}注意：你不能在这里使用百分比...... :(