疑问：基础网页底部<html>元素超出<body>8px空白的来源

问题场景 #

当使用Chrome DevTools检查无自定义样式的基础网页时，发现<html>元素盒的垂直尺寸比包含边距的<body>元素盒多出8px，相关代码如下：

用户代理样式表 #

/* No stylesheet - all CSS from DevTools on Chrome user agent stylesheet */

element.style {}

html {
  display: block;
}

head {
display: none;
}

body {
  display: block;
  margin: 8px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

对应的HTML代码 #

<html>

<head></head>

<body>
  <p>Hello, world</p>
</body>

</html>

原因解析 #

这个8px空白是CSS**外边距折叠（Margin Collapse）**规则作用的结果，具体逻辑如下：

1. 基础样式的外边距设置：

   • <body>默认有margin:8px的上下左右外边距
   • <p>默认有上下各1em的外边距（margin-block-start和margin-block-end）

2. 多层外边距折叠过程：

   • 作为<body>的最后一个子元素，<p>的底部外边距会和<body>的底部外边距折叠，最终取两者中的较大值（假设当前字体大小为16px，1em=16px，所以折叠后底部有效外边距为16px）
   • 由于<html>没有设置padding、border或overflow（如auto/hidden），<body>的上下外边距会进一步与<html>的外边距折叠，此时<body>的外边距会“溢出”到<html>元素的范围外

3. 尺寸计算的差异：

   • DevTools中<body>的“包含边距总尺寸”，是其内容盒高度加上折叠后的有效外边距
   • 而<html>的尺寸会包含<body>溢出的底部外边距与自身折叠的部分，最终导致<html>的高度比<body>包含边距的高度多出8px（正好是<body>默认的margin值）

验证方法 #

可以通过以下操作验证上述结论：

• 给<html>添加overflow:hidden，阻断外边距折叠，此时<html>与<body>的尺寸差会消失
• 给<body>添加border:1px solid，阻断<p>与<body>的外边距折叠，底部的8px空白也会消失

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