Chrome 中垂直外边距不会折叠

Question

在这个fiddle中，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没有像Firefox和IE一样折叠垂直边距。

有什么想法吗？

- Pat Long - Munkii Yebee

---

你有没有注意到，当你从.what-is li项目中删除height:100%时，它会消失？ - Alex

Answer 1

这只能是一个bug。

根据http://www.w3.org/TR/CSS2/box.html#collapsing-margins，在我们的情况下，这些边距应该被折叠：

如果父元素的高度计算为'auto'，则最后一个流动子元素的底部边距和其父元素的底部边距会被折叠。

.what-is的高度应该计算为auto，因为

如果包含块的高度没有明确指定（即依赖于内容的高度），并且此元素没有绝对定位，则值计算为'auto'。

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

最奇怪的是，计算出的高度确实是auto，但Chrome似乎没有按照它所暗示的方式执行。

正如Alex的评论所述，您可以删除height: 100%;规则，这样元素就会考虑其默认高度。auto即为默认高度。

- MatTheCat

Answer 2

说得好，MatTheCat。

这是因为你的高度是100%，Firefox将包含Div的高度作为高度。而Chrome似乎将p标签底部的边距包括在包含Div的高度中。

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

- polarcare