divs之间的空间 – 显示表格单元格
我在这里有两个div：
<div style="display:table-cell" id="div1"> content </div> <div style="display:table-cell" id="div2"> content </div> 有没有办法让这两个div（有display:table-cell ）之间的空间？
你可以使用border-spacing属性：
HTML：
<div class="table"> <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> </div> </div>
CSS：
.table { display: table; border-collapse: separate; border-spacing: 10px; } .row { display:table-row; } .cell { display:table-cell; padding:5px; background-color: gold; }
JSBin演示
任何其他选项？
那么 ，不是真的。
为什么？
-
margin属性不适用于display: table-cell元素。 -
padding属性不会在单元的边缘之间创build空间。 -
float属性破坏了能够像父元素一样高的table-cell元素的预期行为。
如果可能的话使用透明边框
JSFiddle演示
https://jsfiddle.net/74q3na62/
HTML
<div class="table"> <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> </div> </div>
CSS
.table { display: table; border: 1px solid black; } .row { display:table-row; } .cell { display: table-cell; background-clip: padding-box; background-color: gold; border-right: 10px solid transparent; } .cell:last-child { border-right: 0 none; }
说明
您可以使用border-spacing属性，但不仅在表格单元格之间生成空间，而且还在表格单元格和表格容器之间生成空间。
如果您不需要在表格单元格上显示可见边框，则应该使用transparent border来生成单元格边距。 透明边框需要设置background-clip: padding-box; 因为否则表格单元格的背景颜色会显示在边框上。
IE9以上版本（以及所有其他现代浏览器）都支持透明边框和背景剪辑。 如果您需要兼容IE8或不需要实际的透明空间，您可以简单地设置一个白色的边框颜色，并留下background-clip 。
使用任何名称（我将只使用table-split）创build一个新的div，并给它一个宽度，而不添加内容，同时将其放置在需要分隔的必要div之间。
你可以添加任何你觉得有必要的宽度。 我只用0.6％，因为这是我必须做的。
.table-split { display: table-cell; width: 0.6% }
<div class="table-split"></div>
你可以把你的内联css样式放到一个css类中。 您可以使用css样式（如padding：5px或margin：5px）在两个div之间添加空格。
<div class="tile"> content </div> <div class="tile"> content </div> .tile { display: table-cell; padding: 5px; }
