Chrome中的垂直边距不折叠

Posted 2023-03-06

【中文标题】Chrome中的垂直边距不折叠

【英文标题】：Vertical margin not collapsing in Chrome

【发布时间】：2013-01-02 09:04:24

【问题描述】：

在这个小提琴中，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 这样做。

有什么想法吗？

【问题讨论】：

您是否注意到当您从 .what-is li 项目中删除 height:100% 时它消失了？

【参考方案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 就是这样。

【参考方案2】：

MatTheCat 说得好。

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

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