为何移除body元素的border后会出现垂直滚动条？

现象复现 #

以下两段HTML代码仅存在一个差异：body标签是否带有debug-border类。

带border的代码（显示正常） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html, body{margin:0;padding:0; }
    html{ height:100%; background-color:#99cc33 }
    body{ min-height:100%; background-color:#6633cc }
    article{ margin: 30px 0; background-color:#3366cc }

    .debug-border{ border:1px dashed #ff00ff !important; }
</style>
</head>
<body class="debug-border">
<article>
    ARTICLE<br>
</article>
</body>
</html>

此时body占据100%视口高度，页面显示正常，无垂直滚动条。

移除border的代码（出现滚动条） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html, body{margin:0;padding:0; }
    html{ height:100%; background-color:#99cc33 }
    body{ min-height:100%; background-color:#6633cc }
    article{ margin: 30px 0; background-color:#3366cc }

    .debug-border{ border:1px dashed #ff00ff !important; }
</style>
</head>
<body>
<article>
    ARTICLE<br>
</article>
</body>
</html>

此时页面出现垂直滚动条，滚动区域的高度恰好等于article标签的margin值。

核心疑问 #

给body添加透明border-top可解决此问题，但该异常行为的原因是什么？

补充备注 #

• 此问题并非类似问题的重复，核心差异在于问题源于移除body的border，且body初始无固定高度，高度由内容决定。
• 滚动区域高度完全等于article的margin值。
• 该现象在Firefox 80-109、Chrome 109.0.5414.119及Chromium最新版中均能复现。
• 将body的height设为100vh并移除html的100%高度设置，现象无变化。
• article标签未占满100%高度，加上margin后仍比body矮。
• 仅需给body设置border-top即可阻断异常，无需完整border。
• 代码保留box-sizing设置是因为原场景使用Bootstrap 5。

原因解析 #

这是**外边距折叠（Margin Collapse）**结合html/body特殊渲染规则导致的：

1. 当body没有边框时，它的第一个子元素article的margin-top会和body的顶部外边距发生折叠——直白点说就是article的上外边距“跑”到了body外面，变成了html元素的外边距。
2. 你给html设置了height:100%，这让html的高度固定为视口高度，但溢出的margin-top会额外增加页面总高度，导致出现垂直滚动条，高度正好是article的margin-top值（30px）。
3. 当给body添加边框（哪怕是透明的border-top）时，边框会直接阻断外边距折叠的发生——article的上外边距会被限制在body内部，不会溢出到html层面，页面总高度就和视口高度一致，自然不会出现滚动条。

额外说明：html和body属于浏览器渲染中的特殊块级元素，它们的外边距折叠规则和普通容器略有差异，但核心逻辑不变——边框、内边距都能作为“屏障”阻断外边距折叠。

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