Css 理解显示：表格单元格；运转

请注意，我并不是试图解决任何具体问题，而是试图了解导致此问题的原因

我已经设置了一些div的

宽度

、

高度

和

显示

，但高度/宽度设置不受尊重。文本也被向下推

1） 为什么在表格行中设置了

height

时，它会向下推文本，而在删除

height

时，它会将文本放在顶部

2） 为什么不遵守宽度/高度设置

3） 为什么设置

margin

属性对它们也没有任何影响

这似乎是Firefox特有的渲染问题。在divs上设置

vertical align

属性可以修复此问题<代码>顶部、

中部

或

底部

似乎都能工作。当有

高度

但没有

垂直对齐

设置时，我不明白FF在做什么；这可能是一个错误

2） 宽度和高度是值得尊重的，但它们受表格大小规则的约束。当表格没有足够的空间为每个单元格提供指定的宽度时，它将为内容较多的单元格提供更多的空间。这就是你的例子。如果您看一下下面的示例，您将看到，当父元素的宽度大于表单元格宽度的总和时，单元格将考虑宽度。高度应该始终有效（我上面提到的FF渲染问题除外）

3） 表格单元格没有边距。在父div上使用边框间距和显示：表格

我只想补充一点（似乎遗漏了这一点），即设置表格行中各个表格单元格的高度可能是毫无意义的，因为同一表格行中的所有单元格都将与该行中最高的单元格具有相同的高度

---

话虽如此，当动态内容提供给不同的单元格时，可能需要增加高度，这意味着它们的高度会波动。可能是您希望将某个特定单元格的高度设置为永远不小于X，这只有在另一个特定单元格的内容较少时才会生效。

我更新了我的答案和小提琴，以解决您的第一个问题。你在WebKit中看到的东西没有发生，所以我一开始没有看到。在这里参加聚会有点晚了，但只是为了向其他人澄清：

display:table cell

模拟真实表格单元格的行为（所有单元格高度相等，内容不能脱离其容器/单元格，单元格没有边距，但可以有填充和边框）。此外，任何应用于

显示的
float
：表格单元格

元素都会取消表格单元格的效果。我有一个奇怪的单元格显示为填充，我无法解释…我无法理解。在阅读了您的回复后，我有一个“duh”的瞬间，回去发现另一个导致它的元素的底部边距。谢谢！