页面顶部21px边距问题求助：清除body默认margin仍无效

这是CSS的**外边距折叠（Margin Collapse）**导致的问题——你页面顶部的21px边距其实是<h1>元素的默认顶部外边距，和清除body的margin无关。

浏览器里<h1>默认带有margin-top: 0.67em（换算后约21px，和你看到的数值匹配），当它作为body的第一个子元素时，其顶部外边距会和body的外边距发生折叠。哪怕你把body的margin设为0，这个h1的margin也会“穿透”到body的外层（即html元素），最终表现为页面顶部的空白边距。

解决方法（任选其一即可） #

• 直接清除h1的默认顶部外边距：

body {
  margin: 0;
}
h1 {
  margin-top: 0;
}

• 给body触发BFC（块级格式化上下文），阻止外边距折叠：

body {
  margin: 0;
  overflow: auto; /* hidden、scroll也能达到同样效果 */
}

• 给body添加顶部内边距或边框，打破外边距折叠的条件：

body {
  margin: 0;
  padding-top: 1px; /* 或者用 border-top: 1px solid transparent; */
}

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