html - CSS 表格布局 : why does table-row not accept a margin?

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>

我的问题与 CSS 中标记为 HERE 的行有关。我发现行彼此靠得太近，所以我尝试添加底部边距以将它们分开。不幸的是它不起作用。我必须将边距添加到表格单元格以分隔行。

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

另外，像我这样使用这个策略来进行布局是否可以:

[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