为何未指定样式时<body>元素有时会出现边框/外边距？

API 探路者

2026-5-25

解决body内容区莫名覆盖多余区域的问题

这种情况我之前排查过好几次，大概率是浏览器的默认样式在偷偷搞事情！虽然你没给<body>设置外边距（margin）或边框（border），但几乎所有浏览器都会给页面根元素加默认样式，从而影响<body>的盒模型计算，给你整理几个排查和解决方向：

先检查<html>元素的默认样式：很多人会忽略<html>也有浏览器默认的margin/padding，甚至有些浏览器会把它的滚动区域计算和<body>绑定，导致<body>的内容区看起来“越界”。你可以在开发者工具里选中<html>，查看它的盒模型数据，显式重置试试：
```
html {
  margin: 0;
  padding: 0;
}
```
补全全局样式重置：如果你的项目没做统一的样式重置，浏览器的默认样式会让不同元素的布局表现不一致。建议加上基础重置代码，把默认边距、盒模型统一：
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
排查滚动条的影响：如果页面内容超过视口，浏览器会自动显示滚动条，部分浏览器会把滚动条宽度算进视口宽度，导致<body>的内容区视觉上看起来延伸了。可以强制开启滚动条来消除这个偏差：
```
html {
  overflow-y: scroll;
}
```
检查overflow属性：如果<html>或<body>被设置了overflow: hidden，可能会触发盒模型的特殊计算规则，导致内容区的范围显示异常。可以暂时去掉这个属性试试效果。