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

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

<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应用于单元格或内容。我错过了什么吗？谢谢。

您只需使用即可实现您的两个期望的结果padding and 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>