显示:表格单元格,内容和填充

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>