html - 为什么将子元素边距应用于其他单元格？

Question

我有一个奇怪的问题。表格单元格中带有边距并影响所有其他单元格的任何子元素。很难解释，所以看看这个 jsFiddle:https://jsfiddle.net/5s9nab3h/

<style>
    .table {
        display: table;
        width: 100%;
    }
    .table > .cell {
        display: table-cell;
        border: 1px solid #f00;
    }
    .tallmargin {
        padding-top: 100px;
    }
</style>

<div class="table">
    <div class="cell">
        This cell has no margin or padding.
    </div>
    <div class="cell">
        <p class="tallmargin">This content has a 100px margin on top.</p>
    </div>
</div>

编辑:问题出在 .table > .cell 我需要 vertical-align: top 因为它默认为 middle.

Answer 1

display: table-cell 将每列的高度设置为相等的大小。您可能想阅读此 tutorial在表格单元格上

高度一致的列

通过添加 display: table-cell 属性列扩展以匹配行中最大列的高度。高度由内容定义，而不是明确的固定高度。