Question

这是我的HTML代码。

<html>
<head>
<title>Foo</title>
<style>
body {
    margin: 0;
}
</style>
</head>
<body>
<main>
<h1>Foo</h1>
<p>Bar</p>
</main>
</body>
</html>

以下是macOS 10.12.6上Chrome 61.0.3163.100的输出。

您可以看到输出的行为就像margin-top元素的<h1> 0一样。但是盒子模型显示了21.440的边际。

Firefox上的输出看起来没问题。

Answer 1

您没有使用doctype，并且在quirks mode您不想成为的地方。在第一行添加适当的doctype，让自己进入＆＃34;标准模式＆＃34;问题消失了。

<!DOCTYPE html>

Answer 2

我必须道歉，我的问题出错了。如果没有边界或填充分隔，父母和子女边缘会崩溃，只有较大的边缘优先于父母的边界。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

父级和第一个/最后一个孩子：如果没有边框，则填充，内嵌   部分，块格式化上下文创建，或清除分离   从第一个子区块的边缘顶部开始的区块顶部;要么   没有边框，填充，内联内容，高度，最小高度或最大高度   将块的边距底部与其边缘底部分开   最后一个孩子，然后那些边缘崩溃了。折叠的保证金最终结束   在父母之外。

这些规则甚至适用于零的边距，因此a的边距   第一个/最后一个孩子在其父母之外结束（根据规则   以上）父母的保证金是否为零。

如果父级的边距为0，则折叠的边距将与下一个父边距折叠。看看这个例子：

示例显示了这一点：

<html>
<head>
<body>
<main>
<h1>Foo</h1>
<p>Bar</p>
</main>
</body>
</html>

在前三个“foos”中，main的上边距为8px，它会以默认边距h1折叠，结果边距从html边框变为主边框。

在接下来的两个“foos”中，main的边距为0，因此边缘与body折叠并越过html边框。

这就是chrome中发生的情况，它应用默认代理用户样式：

-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;

与身体边缘塌陷并越过html边界。

Firefox的行为似乎有所不同，如果你删除主标签，h1的边框就像在Chrome中一样超出html，但是如果主要作为父级（虽然有0边距），它就不会发生。我一直在寻找浏览器的样式，但我找不到任何可以解释的东西，我只能说浏览器的行为不同。

很抱歉，如果我的解释不是最好的，这是一个复杂的问题，感谢您带来它的调查很有趣。

阅读折边利润：

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 3

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

内置了垂直边距的折叠。与Firefox相比，Chrome更重视您的身体边距，并将您的风格作为更高优先级。

为了避免折叠边距的整个问题，您可以在每个文本元素而不是边距上使用display-block和padding-bottom。

H1似乎在Chrome中的利润率为零

3 个答案: