Html CSS 表格布局：为什么表格行不接受边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1993277/
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
CSS table layout: why does table-row not accept a margin?
提问by Stefano Borini
.container {
width: 850px;
padding: 0;
display: table;
margin-left: auto;
margin-right: auto;
}
.row {
display: table-row;
margin-bottom: 30px;
/* HERE */
}
.home_1 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_2 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}
.home_3 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_4 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}<div class="container">
<div class="row">
<div class="home_1"></div>
<div class="home_2"></div>
<div class="home_3"></div>
<div class="home_4"></div>
</div>
<div class="row">
<div class="home_1"></div>
<div class="home_2"></div>
</div>
</div>My question is relative to the line marked HEREin the CSS. I found out that the rows are too near to each other, so I tried to add a bottom margin to separate them. Unfortunately it does not work. I have to add the margins to the table cells to separate the rows.
我的问题HERE与 CSS 中标记的行有关。我发现这些行彼此靠得太近，所以我尝试添加一个底部边距来分隔它们。不幸的是它不起作用。我必须将边距添加到表格单元格以分隔行。
What is the reason behind this behavior?
这种行为背后的原因是什么？
Also, is it ok to use this strategy to perform layouting as I am doing:
另外，是否可以像我一样使用此策略执行布局：
[icon] - text [icon] - text
[icon] - text [icon] - text
or is there a better strategy?
或者有更好的策略吗？
采纳答案by richardtallent
See the CSS 2.1 standard, section 17.5.3. When you use display:table-row, the height of the DIV is solely determined by the height of the table-cellelements in it. Thus, margin, padding, and height on those elements have no effect.
请参阅 CSS 2.1 标准，第 17.5.3 节。当您使用 时display:table-row，DIV 的高度仅由其中table-cell元素的高度决定。因此，这些元素的边距、填充和高度没有影响。
回答by MuffinTheMan
How's this for a work around (using an actual table)?
这如何解决（使用实际表格）？
table {
border-collapse: collapse;
}
tr.row {
border-bottom: solid white 30px; /* change "white" to your background color */
}
It's not as dynamic, since you have to explicitly set the color of the border (unless there's a way around that too), but this is something I'm experimenting with on a project of my own.
它不是那么动态，因为您必须明确设置边框的颜色（除非也有解决方法），但这是我在自己的项目中尝试的东西。
Editto include comments regarding transparent:
编辑以包含有关transparent以下内容的评论：
tr.row {
border-bottom: 30px solid transparent;
}
回答by Julian H. Lam
The closest thing I've seen would be to set border-spacing: 0 30px;to the container div. However, this just leaves me with space on the upper edge of the table, which defeats the purpose, since you wanted margin-bottom.
我见过的最接近的事情是设置border-spacing: 0 30px;为容器 div。然而，这只会让我在桌子的上边缘留下空间，这违背了目的，因为你想要边距底部。
回答by naivists
Have you tried setting the bottom margin to .row div, i.e. to your "cells"?
When you work with actual HTML tables, you cannot set margins to rows, too - only to cells.
您是否尝试将底部边距设置为.row div，即设置为您的“单元格”？当您使用实际的 HTML 表格时，您也不能为行设置边距 - 只能设置为单元格。
回答by Kris Boyd
There is a pretty simple fix for this, the border-spacingand border-collapseCSS attributes work on display: table.
对此有一个非常简单的修复方法，border-spacing和border-collapseCSS 属性适用于display: table.
You can use the following to get padding/margins in your cells.
您可以使用以下内容获取单元格中的填充/边距。
.container {
width: 850px;
padding: 0;
display: table;
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 15px;
}
.row {
display: table-row;
}
.home_1 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_2 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}
.home_3 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_4 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}<div class="container">
<div class="row">
<div class="home_1">Foo</div>
<div class="home_2">Foo</div>
<div class="home_3">Foo</div>
<div class="home_4">Foo</div>
</div>
<div class="row">
<div class="home_1">Foo</div>
<div class="home_2">Foo</div>
</div>
</div>Note that you haveto have
请注意，您必须拥有
border-collapse: separate;
Otherwise it will not work.
否则它将无法工作。
回答by Mehmet Eren Yener
.row-seperator{
border-top: solid transparent 50px;
}
<table>
<tr><td>Section 1</td></tr>
<tr><td>row1 1</td></tr>
<tr><td>row1 2</td></tr>
<tr>
<td class="row-seperator">Section 2</td>
</tr>
<tr><td>row2 1</td></tr>
<tr><td>row2 2</td></tr>
</table>
#Outline
Section 1
row1 1
row1 2
Section 2
row2 1
row2 2
this can be another solution
这可以是另一种解决方案
回答by funky-nd
Add spacer span between two elements, then make it unvisible:
在两个元素之间添加间隔跨度，然后使其不可见：
<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>
.spacer {
visibility: hidden
}
回答by Jason
Works - Add Spacing To Table
作品 - 将间距添加到表格
#options table {
border-spacing: 8px;
}
回答by TeT Psy
adding a br tag between the divs worked. add br tag between two divs that are display:table-row in a parent with display:table
在 div 之间添加 br 标签有效。在两个 div 之间添加 br 标签，这些 div 是 display:table-row 父级中的 display:table
