Question

在这个小提琴中，http://jsfiddle.net/munkii/tpQQN/我通过intro类在段落元素上有一些底部，并且通过what-is类在列表项上有一些底部。

即

article.about .what-is {
    height: 100%;
    margin-bottom: 34px;
    padding-right: 34px;
    width: 600px;
}

article.about p.intro {
    font-weight: bold;
    margin-bottom: 43px;
}

我已从我的工作中移除了不必要的余量，但我仍然有兴趣知道为什么Chrome在FF和IE时没有折叠垂直边距。

有什么想法吗？

Answer 1

它只能是一个错误。

根据http://www.w3.org/TR/CSS2/box.html#collapsing-margins，这些边距应该像我们在这种情况下一样崩溃：

如果父级具有“自动”计算高度
，则最后一个流入子级的下边距和其父级的下边距

.what-is'身高应计算为auto，因为

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则该值将计算为“auto”。

（http://www.w3.org/TR/CSS2/visudet.html#the-height-property）

最奇怪的是，计算出的高度确实是auto，但似乎Chrome没有做到这意味着什么。

正如Alex的评论所述，您可以删除height: 100%;规则，该规则允许元素考虑其默认高度。 auto即是。

Answer 2

好吧，MatTheCat说。

是因为你的身高是100％，Firefox会将包含Div的高度作为高度。 Chrome似乎将p标签上的边距底部包含在包含Div的高度中。

如果这有任何意义......

Chrome中的垂直边距不会崩溃

2 个答案: