使用显示表格行实现元素之间的垂直间距？

Question

我需要使一个 div 居中。此 div 是其 2 包含“行”的宽度。这些“行”的宽度由它们的内容定义。内容具有左右对齐的元素。我还需要垂直居中的不太高的内容。

到目前为止，我已经完成了所有这些。我还需要行上的背景颜色和它们之间的空间。我已经用 div.spacer 完成了空间，但我想知道是否有可能在没有空 div 的情况下实现同样的事情以保持我的标记更干净？

我正在苦苦挣扎，因为显示表格行和表格单元格不允许边距。

我还尝试使用伪内容在顶部绝对定位一个白色块，使其看起来像行之间有一个空间，但相对显示不适用于具有显示表行跨浏览器的元素。

我尝试使用border-spacing css 属性，但它在行的上方和下方都添加了边距，我只需要下面的边距。

以下是我的标记。该图像准确地显示了我需要实现的目标，所以我可以在没有 div.spacer 的情况下做同样的事情吗？

http://codepen.io/anon/pen/ZWMPgB

<div class="cont">
    <div class="row">
        <h2>Heading</h2>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>
    <div class="spacer"></div>
    <div class="row">
        <h2>Longer Heading</h2>
        <ul>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </div>
</div>

body {
  padding-top: 10px;
}

* {
  margin: 0;
  padding: 0;
}
.cont {
  display: table;
  margin: auto;
}
.row {
  display: table-row;
  background: grey;
}
h2 {
  display: table-cell;
  padding-right: 50px;
  font-size: 3em;
}
ul {
  display: table-cell;
  vertical-align: middle;
}
li {
  display: inline-block;
}
.spacer {
    display: table-row;
    height: 10px;
}

Answer 1

也许你需要这样的东西：

.row > * {
    border-bottom: 5px solid #ffffff;
}

这将在您的行之后添加 5px 空间。