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

我有一个奇怪的问题。表格单元格中具有边距并影响其他每个单元格的任何子元素。这很难解释，所以请查看以下JSFIDLE：

.桌子{
显示：表格；
宽度：100%；
}
.table>.cell{
显示：表格单元格；
边框：1px实心#f00；
}
tallmargin先生{
填充顶部：100px；
}
此单元格没有边距或填充。
此内容顶部有100px的边距

---

编辑：问题出在

.table>.cell

我需要

垂直对齐：顶部

，因为它默认为

中间

显示：table cell正在将每列的高度设置为相同的大小。您可能想在表格单元格中阅读此内容

高度一致的列

---

通过添加显示：表格单元格属性列展开以匹配行中最大列的高度。高度由内容定义，而不是明确的固定高度。

显示：表格单元格将每列的高度设置为相等大小。您可能想在表格单元格中阅读此内容

高度一致的列 通过添加显示：表格单元格属性列展开以匹配行中最大列的高度。高度由内容定义，而不是明确的固定高度。

可能使用浮动

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

也许使用浮动

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

---

---

然后您将错过

显示：表格单元格

因为

display

的计算值将是

block

因为

display

的计算值将是

block

因为

显示

的计算值将是

块

。您的回答让我意识到了问题所在。在

.table>.cell

中，我需要有

垂直对齐：top

.True，但它没有解释为什么前一个单元格内容的垂直对齐会受到后一个单元格的影响。问题不在于单元格的高度。很明显，表格单元格具有相同的高度。主要的问题是为什么一个单元格顶部的填充会影响另一个单元格内容的垂直位置，而不仅仅是该单元格的高度。我知道表格单元格总是和它们的同级单元格一样高，但在客户端

元素上设置边距似乎影响了其他表格单元格的填充。但事实并非如此，因为

表格单元格

默认设置为

垂直对齐：中间

，所以实际上只是将内容垂直居中放置在其他单元格中。您的回答让我意识到了问题所在。在

.table>.cell

中，我需要有

垂直对齐：top

.True，但它没有解释为什么前一个单元格内容的垂直对齐会受到后一个单元格的影响。问题不在于单元格的高度。很明显，表格单元格具有相同的高度。主要的问题是为什么一个单元格顶部的填充会影响另一个单元格内容的垂直位置，而不仅仅是该单元格的高度。我知道表格单元格总是和它们的同级单元格一样高，但在客户端

元素上设置边距似乎影响了其他表格单元格的填充。但事实并非如此，因为

表格单元格

默认设置为

垂直对齐：中间

，所以实际上只是将内容垂直居中放置在其他单元格中。您的回答让我意识到了问题所在。在

.table>.cell

中，我需要有

垂直对齐：top

.True，但它没有解释为什么前一个单元格内容的垂直对齐会受到后一个单元格的影响。问题不在于单元格的高度。很明显，表格单元格具有相同的高度。主要的问题是为什么一个单元格顶部的填充会影响另一个单元格内容的垂直位置，而不仅仅是该单元格的高度。我知道表格单元格总是和它们的同级单元格一样高，但在客户端

元素上设置边距似乎影响了其他表格单元格的填充。但事实并非如此，因为

表格单元格

默认设置为

垂直对齐：中间

，所以实际上只是将内容垂直居中放置在其他单元格中。有趣的问题。我刚刚做了一个比较HTML表和CSS表的例子。可以看出，CSS表中一个单元格上的填充会影响其他单元格内容的位置。但对于HTML表来说，情况并非如此……这是一个有趣的问题。我刚刚做了一个比较HTML表和CSS表的例子。可以看出，CSS表中一个单元格上的填充会影响其他单元格内容的位置。但对于HTML表来说，情况并非如此……这是一个有趣的问题。我刚刚做了一个比较HTML表和CSS表的例子。可以看出，CSS表中一个单元格上的填充会影响其他单元格内容的位置。但对于HTML表来说不是这样的。。。