CSS表格布局:为什么表格行不接受保证金？

Question

.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>

我的问题是相对于HERECSS中标记的行.我发现这些行太靠近了,所以我尝试添加一个底部边距来分隔它们.不幸的是它不起作用.我必须将边距添加到表格单元格以分隔行.

这种行为背后的原因是什么？

此外,我可以使用此策略执行布局:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

还是有更好的策略？

Answer 1

请参阅CSS 2.1标准,第17.5.3节.使用时display:table-row,DIV的高度仅由其中table-cell元素的高度决定.因此,这些元素上的边距,填充和高度无效.

http://www.w3.org/TR/CSS2/tables.html

Answer 2

如何解决这个问题(使用实际表格)？

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

它不是那么动态,因为你必须明确地设置边框的颜色(除非有这样的方法),但这是我在自己的项目上试验的东西.

编辑以包含以下评论transparent:

tr.row {
    border-bottom: 30px solid transparent;
}

Answer 3

我见过的最接近的事情就是设置border-spacing: 0 30px;容器div.然而,这只会让我在桌子的上边缘留下空间,这会破坏目的,因为你想要边缘底部.

Answer 4

您是否尝试将底部边距设置为.row div"单元格"？使用实际的HTML表时,也不能将行设置为行 - 仅限于单元格.

Answer 5

对此有一个非常简单的修复方法，border-spacing和border-collapseCSS 属性适用于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>
</div>

请注意，您必须拥有

border-collapse: separate;

否则它将无法工作。