CSS表格布局：为什么表格行不接受保证金？
.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>
我的问题是相对于CSS中标有HERE的行。 我发现行相互靠得太近，所以我尝试添加一个底部边距来分隔它们。 不幸的是它不工作。 我必须添加边距到表格单元格来分隔行。
这种行为背后的原因是什么？
另外，可以使用这个策略来执行布局，因为我正在做：
[icon] - text [icon] - text [icon] - text [icon] - text
还是有更好的策略？
请参阅CSS 2.1标准，第17.5.3节。 当使用display:table-row ，DIV的高度完全由其中table-cell元素的高度决定。 因此，这些元素的边距，填充和高度不起作用。
这是如何工作（使用实际的表）？
table { border-collapse: collapse; } tr.row { border-bottom: solid white 30px; /*change "white" to your background color*/ }
这不是dynamic的，因为你必须明确地设置边界的颜色（除非有解决方法），但这是我正在尝试的一个项目，我自己的项目。
编辑以包含有关“透明”的评论：
tr.row { border-bottom: transparent 30px; }
我见过的最接近的东西是设置border-spacing: 0 30px; 到容器div。 然而，这只会让我在桌子的上边缘留下空间，因为你希望保留底部，所以这个目的已经失败了。
你有没有尝试将底部边距设置为.row div ，也就是说，你的“细胞”？ 当您使用实际的HTML表格时，不能将边距设置为行，也不能将其设置为单元格。
有一个非常简单的修复， border-spacing和border-collapse CSS属性在display: table;工作display: table;
您可以使用以下来获取单元格中的填充/页边空白。
.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>
小提琴
.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
这可以是另一个解决scheme
在工作的div之间添加br标签。 在正在显示的两个div之间添加br标记：在具有display：table的父级中的table-row
