必须同时清零 html 和 body 的 margin 与 padding，并设 height: 100%；广告容器首子元素需防外边距合并；100vw 溢出需检查 padding/border；Windows 滚动条占位需用 scrollbar-gutter 或 overflow-y: scroll 应对。
body 和 html 的 margin/padding 是否双清零
白边最常来自 body 和 html 元素的默认边距叠加，只清 body 不够——Chrome、Firefox、Safari 都会给两者各加 8px margin，单独重置一个，另一个仍会“撑开”视口。
必须同时写：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
注意：height: 100% 不是可选项：它确保后续用 100vh 或背景图时能真正铺满，否则底部可能漏出一条白线。
如果用了 Bootstrap，直接在 上加类更可靠：
因为 Bootstrap 的 m-0 和 p-0 带 !important，能压过你 CSS 里任何残留的 padding: 100px 类声明。
广告/导航容器是否被外边距合并（margin collapse）顶出
即使根节点清干净了，广告区域（如 这不是 bug，是 CSS 规范定义的外边距合并行为。解决方式不是猜哪个元素动了，而是主动防御： 设了 验证方法：打开开发者工具，选中该元素 → 看右侧面板 “Computed” 里的 修复建议： 页面内容刚好满屏时，右侧突然多出一条“白边”，点开开发者工具却看不到对应元素——这往往是 Windows 系统默认 17px 滚动条占位导致的视觉错觉：滚动条挤窄了视口，而你的背景色没延伸过去。 快速验证：鼠标滚轮拉到底，看是否出现横向滚动条；或者临时加 更现代的解法是用 CSS 逻辑属性预留空间： 但兼容性有限（Chrome 94+），生产环境稳妥做法仍是 真正难排查的白边，往往藏在“已清零”的假象里——比如你写了 或 ，它的 margin-top 仍可能“冒泡”到容器顶部，形成不可见的空白。
.ad-banner h2, .ad-banner p { margin-top: 0; }
.ad-banner > *:first-child { margin-top: 0; }
margin-top 控制首元素位置，改用 padding-top 在父容器上做留白100vw 宽度 + 默认 margin 导致右侧溢出
width: 100vw 还有白边？大概率是元素实际宽度超了——100vw 是严格等于视口宽度，但若该元素还继承了 body 的 margin，或自身有 padding-left: 5vw，总宽就会 > 100vw，触发横向滚动条，右侧视觉上就出现“假白边”。width 和 total width 是否超过屏幕宽度。
width: 100% 替代 100vw，它基于父容器宽度计算，更可控100vw，加上 box-sizing: border-box 并确认无额外 padding 或 border
html { overflow-x: hidden; }（仅临时调试用）滚动条占位干扰（Windows 最常见）
html { overflow-y: scroll; }，让滚动条常驻，白边消失即证实。html {
scrollbar-gutter: stable both-edges;
}
overflow-y: scroll 或用 JS 检测滚动条宽度后动态补偿。body { margin: 0; }，但忘了 html 还有默认 margin；或者清了 margin 却漏了某处 padding: 100px 的硬编码。调试时别信“我肯定清过了”，用开发者工具逐层点开 html → body → 广告容器，看 Computed 面板里每个元素的 margin 和 padding 实际值才是关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
