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

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

对此有一个非常简单的解决方法，public abstract class Metal { //add fields applicable for all metals public double calcDayTimeCost() { //add code here } } public class Bronze extends Metal { //Bronze specific details } public class Silver extends Metal { //Silver specific details }和border-spacing CSS属性适用于border-collapse。

您可以使用以下内容获取单元格中的填充/边距。

＆＃13;

display: table

＆＃13;

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

＆＃13;

请注意，您拥有

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

否则它将无效。

Answer 6

Fiddle

netstandard1.6

这可能是另一种解决方案

Answer 7

在两个元素之间添加间隔范围，然后使其不可见：

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Answer 8

工程-向表中添加间距

#options table {
  border-spacing: 8px;
}

Answer 9

如果您想要特定的边距，例如20px，您可以将表格放在div中。

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

因此，#tableDiv的边距为20px，但表格本身的宽度为100％，这迫使表格必须为全宽，但两侧的边距除外。

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

Answer 10

在div之间添加br标签。在两个显示的div之间添加br标签：父级的table-row，显示：table

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

10 个答案: