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

【问题标题】：Display: table-cell, contents and padding显示：表格单元格、内容和填充
【发布时间】：2011-02-14 18:20:59
【问题描述】：

我有一个非常简单的 HTML 页面，它在两列中显示内容。要格式化列，我使用<div> 作为外部容器（显示：table-row）和两个内部<div> 作为实际列（显示：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 应用于单元格还是内容，行为都是相同的。我错过了什么吗？谢谢。

【问题讨论】：

我们能有一些 HTML 代码吗？
是的，在第一段之后！
哈哈，不知什么原因，我第一次看到这个我想到了迈尔斯格雷。看看谁来了！

标签： html css

【解决方案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>

【讨论】：

好吧，margin 没有做到这一点，而padding 正是我用来生成黄色（不需要的）渲染的东西！为了清楚起见，我在屏幕截图中包含了一些细节。谢谢！
我将margin 提供给content div。查看工作示例：jsfiddle.net/4GYn9
哎呀——我自己“错误地”将vertical-align留在了 .cell 类中，仅此一项就解决了所有问题。我已经更新了 jsFiddle 中的示例；看看这个。我正在修补vertical-align，但没有注意，因为我正忙着准备这个问题......无论如何，谢谢！
@humberto 您的解决方案有效，请将其作为答案并接受它：P 我喜欢这个我花了很多时间来解决这个问题
在此答案中添加.cell { vertical-align: top; } 是正确的。