为什么是“显示：表格单元格”的股利，不受边际影响？
我有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属性]适用于除table-caption，table和inline-table之外的表格显示types的元素之外的所有元素
换句话说， margin属性不适用于display:table-cell元素。
解
考虑使用border-spacing属性。
请注意，它应该应用于具有display:table layout和border-collapse:separate parent的父元素。
例如：
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彼此相邻
<div id="1" style="float:left; margin-right:5px"> </div> <div id="2" style="float:left"> </div>
这应该工作！
如果您没有边框，则可以使用透明边框而不是边距：
div { display: table-cell; border: 5px solid transparent; }
注意：你不能在这里使用百分比… 🙁
