页面四周白边主因是浏览器默认 body margin: 8px，解决方法是 html, body { margin: 0; padding: 0; }，并配合 height: 100% 确保全屏布局准确，避免滥用 * 重置。
body 默认 margin: 8px 是白边主因
几乎所有现代浏览器（Chrome、Firefox、Safari）都会给 body 元素加 margin: 8px，这是页面四周出现“全局白边”的最常见原因。它和你的 CSS 文件是否写了其他样式无关，是用户代理样式表（user agent stylesheet）直接注入的。
直接写 body { margin: 0; } 就能解决——但要注意顺序：这条规则必须在所有可能覆盖它的样式之后加载，否则会被 !important 或更高优先级选择器干掉。
- 如果用了 Bootstrap，直接在
标签上加class="m-0"，它自带!important，稳压一切 - 若用 Tailwind，同理：
class="m-0" - 纯 CSS 项目，把
body { margin: 0; }放在样式表最顶部，或至少在自定义 reset 块里显式声明
html 和 body 都要清，别只清 body
html 元素虽通常无默认 margin，但在某些旧版 Safari 或 WebView 中可能有非零值；更关键的是，html 的 padding 或 border 会影响 height: 100% 的计算。所以稳妥做法是连带重置：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
加上 height: 100% 是为了后续全屏布局（比如背景渐变贴边、绝对定位子元素撑满）不被意外截断。
- 不加
html只清body，在某些移动端 WebView 下仍可能出现 1px 缝隙 - 如果页面已有
html { padding: 10px; }这类声明，必须确保新规则优先级更高，或加!important
别盲目用 * { margin: 0; padding: 0; }
通配符重置看似一劳永逸，实际会破坏大量原生语义间距：表单控件失去内边距、标题堆叠、列表缩进消失、details/summary 失去默认间距……后续反而要一行行手动补。
真正该做的，是精准控制顶层容器 + 内容流元素：
- 必加：
html, body { margin: 0; padding: 0; } - 推荐补：
h1, h2, h3, p, ul, ol, blockquote { margin: 0; }（只归零上下，保留左右结构） - 慎加：
* { box-sizing: border-box; }—— 它安全，但margin/padding归零不是它的职责 - 绝对避免：
*::before, *::after { margin: 0; padding: 0; }，伪元素本就不该有默认边距，加了反而干扰图标类库（如 Font Awesome）
开发者工具才是你真正的 reset 文档
当你发现某处“白边”清不掉，别猜，打开 DevTools → 选中对应元素 → 切到 “Computed” 面板，看 margin 和 padding 各自的值从哪来：是 user agent？继承？还是某个 CSS 框架的工具类？
常见误判点：
-
<p></p>的上下空隙常来自margin-block-start/margin-block-end（逻辑属性），不是margin-top/margin-bottom -
在 Safari 可能用margin-block: 1em，此时margin: 0仍有效，但需确认 computed 值是否真为 0 - Flex/Grid 容器里子元素“有缝隙”，大概率是
vertical-align: baseline或align-items: stretch导致，和 margin 无关
真实项目里，html, body { margin: 0; padding: 0; } 覆盖 95% 场景；剩下那 5%，靠 Computed 面板定位，比背规则管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
