容器子元素的margin为何会在html与body之间产生间距？

你写的代码如下：

<html>
<body style="margin: 0;">
    <div class="container" style="height: 100vh; min-height: 100vh; background-color: purple;;">
        <div class="child" style="height: 20px; background-color: palegoldenrod; margin-top: 10px;"></div>
    </div>
</body>
</html>

出现这种情况是因为CSS的**外边距折叠（Margin Collapsing）**机制：当块级父元素没有设置padding、border，也没触发BFC（块级格式化上下文）时，它的上外边距会和第一个子元素的上外边距合并成一个。这里.container的上外边距默认是0，和.child的10px margin-top折叠后，最终表现为整个.container拥有10px的上外边距，而.container和body之间又发生了一次外边距折叠，所以连带着body也被向下推了10px。

解决这个问题有几种常用方法：

• 给.container加一层透明边框：border-top: 1px solid transparent，边框能阻断外边距的相邻关系
• 给.container设置padding-top：比如padding-top: 1px（如果不想影响高度，可以用calc(100vh - 1px)调整容器高度）
• 触发.container的BFC：比如设置overflow: hidden，或者display: flow-root（专门用于创建BFC的属性，兼容性好）
• 把.child的margin-top换成.container的padding-top

比如用overflow: hidden修改后的代码：

<html>
<body style="margin: 0;">
    <div class="container" style="height: 100vh; min-height: 100vh; background-color: purple; overflow: hidden;">
        <div class="child" style="height: 20px; background-color: palegoldenrod; margin-top: 10px;"></div>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Lenn