显示：表格单元格，内容和填充

Question

我有一个非常简单的HTML页面，它在两列中显示内容。要格式化列，我使用<div>作为外部容器（display：table-row），使用两个内部<div>作为实际列（display：table-cell）。其中一列在顶部有一个填充。标记如下所示 - 为清晰起见，省略了额外的标记和样式：

<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>

<div class="row">
   <div class="cell">
      <div class="content">Some content; this is not padded.</div>
   </div>

    <div class="cell">
        <div class="content">More content; padded at the top.</div>
    </div>
</div>

---

我得到了这个：

---

但我期待这个：

---

无论padding-top是应用于单元格还是内容，行为都是相同的。我错过了什么吗？感谢。

Answer 1

只需在您的div padding上使用margin和content即可获得两个期望的结果。请记住，填充将有助于对象的整体宽度和高度，因此这将扩展背景颜色。

第一个屏幕截图：

<div class="content" style="margin-top: 10px">More content; padded at the top.</div>

第二个屏幕截图：

<div class="content" style="padding-top: 10px">More content; padded at the top.</div>