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

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 正在将每列的高度设置为相等的大小。您可能希望在table-cell

上阅读此tutorial

一致的高度列

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

Answer 2

也许使用浮动......

.table {
    display: table;
    width: 100%;
}
.table > .cell {
    display: table-cell;
    border: 1px solid #f00;
    float: left;
}
.tallmargin {
    padding-top: 500px;
}