为什么显示：table-cell受其他单元格中元素的影响

Question

在CSS表格中，有人可以帮助我理解为什么第一列中的填充元素会影响第二列中的div？

这是一个段落有填充集的示例。右栏中的DIV也是 - 填充不正确。我在左栏内容中指定行高时遇到了类似的问题，但简化了此问题的示例。

http://jsfiddle.net/APXT7/2/

关于table-cell有许多相似/相关的问题，但我找不到专门解决这个问题的问题。

Answer 1

您可以在单元格类上使用vertical-align属性（vertical-align:top），或者像jsfiddle.net/j08691/APXT7/4一样使用div。由于这些div显示为表格单元格，这可能是您正在寻找的。

Answer 2

这很可能是行高的问题，而不是填充之一。这意味着，尽管您可能怀疑，实际上没有填充传播到右列（计算值仍为零）。我仍然称之为副作用调整p元素的填充。

p元素顶部和底部的填充将其基线向下推。这导致同一行/行上的其他“单元”的基线也发生偏移。当然，您可以找到spec中列出的所有细节，但由于两个“单元格”具有相同的垂直对齐方式（baseline），因此当一个方向移位时，它们必须排成一行。