Html div 之间的空间 - 显示表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18346083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
space between divs - display table-cell
提问by System-x32z
I have here two divs:
我这里有两个 div：
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
Is there a way to make space between these two divs (that have display:table-cell)?
有没有办法在这两个 div（有display:table-cell）之间腾出空间？
回答by Hashem Qolami
You can use border-spacingproperty:
您可以使用border-spacing属性：
HTML:
HTML：
<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
</div>
</div>
CSS:
CSS：
.table {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
.row { display:table-row; }
.cell {
display:table-cell;
padding:5px;
background-color: gold;
}
Any other option?
还有其他选择吗？
Well, not really.
嗯，不是真的。
Why?
为什么？
marginproperty is not applicabletodisplay: table-cellelements.paddingproperty doesn't create space between edges of the cells.floatproperty destroys the expected behavior oftable-cellelements which are able to be as tall as their parent element.
margin属性不适用于display: table-cell元素。padding属性不会在单元格边缘之间创建空间。float属性会破坏table-cell能够与其父元素一样高的元素的预期行为。
回答by Max
Use transparent borders if possible.
如果可能，请使用透明边框。
JSFiddle Demo
JSFiddle 演示
https://jsfiddle.net/74q3na62/
https://jsfiddle.net/74q3na62/
HTML
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
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;
}
Explanation
解释
You could use the border-spacingproperty, as the accepted answer suggests, but this not only generates space between the table cells but also between the table cells and the table container. This may be unwanted.
您可以使用该border-spacing属性，正如公认的答案所暗示的那样，但这不仅会在表格单元格之间生成空间，还会在表格单元格和表格容器之间生成空间。这可能是不需要的。
If you don't need visible borders on your table cells you should therefore use transparentborders to generate cell margins. Transparent borders require setting background-clip: padding-box;because otherwise the background color of the table cells is displayed on the border.
如果您不需要表格单元格上的可见边框，则应使用transparent边框来生成单元格边距。透明边框需要设置background-clip: padding-box;，否则表格单元格的背景颜色会显示在边框上。
Transparent borders and background-clip are supported in IE9 upwards (and all other modern browsers). If you need IE8 compatibility or don't need actual transparent space you can simply set a white border color and leave the background-clipout.
IE9 以上（以及所有其他现代浏览器）都支持透明边框和背景剪辑。如果您需要 IE8 兼容性或不需要实际的透明空间，您可以简单地设置一个白色边框颜色并将其background-clip排除在外。
回答by jalalBK
<div style="display:table;width:100%" >
<div style="display:table-cell;width:49%" id="div1">
content
</div>
<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->
<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>
回答by Gareth Clarke
Well, the above does work, here is my solution that requires a little less markup and is more flexible.
嗯，以上确实有效，这是我的解决方案，需要更少的标记并且更灵活。
.cells {
display: inline-block;
float: left;
padding: 1px;
}
.cells>.content {
background: #EEE;
display: table-cell;
float: left;
padding: 3px;
vertical-align: middle;
}<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>回答by Anon
Make a new div with whatever name (I will just use table-split) and give it a width, without adding content to it, while placing it between necessary divs that need to be separated.
使用任何名称创建一个新 div（我将只使用 table-split）并为其指定宽度，而不向其添加内容，同时将其放置在需要分隔的必要 div 之间。
You can add whatever width you find necessary. I just used 0.6% because it's what I needed for when I had to do this.
您可以添加任何您认为必要的宽度。我只使用了 0.6%，因为这是我必须这样做时所需要的。
.table-split {
display: table-cell;
width: 0.6%
}<div class="table-split"></div>