必须同时清零 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，直接在 上加类更可靠：
立即学习“前端免费学习笔记（深入）”；
<body class="m-0 p-0">
因为 Bootstrap 的 m-0 和 p-0 带 !important，能压过你 CSS 里任何残留的 padding: 100px 类声明。
广告/导航容器是否被外边距合并（margin collapse）顶出
即使根节点清干净了，广告区域（如 <div class="ad-banner">）第一个子元素是 <code><h2></h2> 或 <p></p>，它的 margin-top 仍可能“冒泡”到容器顶部，形成不可见的空白。
这不是 bug，是 CSS 规范定义的外边距合并行为。解决方式不是猜哪个元素动了，而是主动防御：
- 对广告区域内部显式归零：
.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，触发横向滚动条，右侧视觉上就出现“假白边”。
验证方法：打开开发者工具，选中该元素 → 看右侧面板 “Computed” 里的 width 和 total width 是否超过屏幕宽度。
修复建议：
- 优先用
width: 100%替代100vw，它基于父容器宽度计算，更可控 - 若必须用
100vw，加上box-sizing: border-box并确认无额外padding或border - 极端情况可强制隐藏横向滚动：
html { overflow-x: hidden; }（仅临时调试用）
滚动条占位干扰（Windows 最常见）
页面内容刚好满屏时，右侧突然多出一条“白边”，点开开发者工具却看不到对应元素——这往往是 Windows 系统默认 17px 滚动条占位导致的视觉错觉：滚动条挤窄了视口，而你的背景色没延伸过去。
快速验证：鼠标滚轮拉到底，看是否出现横向滚动条；或者临时加 html { overflow-y: scroll; }，让滚动条常驻，白边消失即证实。
更现代的解法是用 CSS 逻辑属性预留空间：
html {
scrollbar-gutter: stable both-edges;
}
但兼容性有限（Chrome 94+），生产环境稳妥做法仍是 overflow-y: scroll 或用 JS 检测滚动条宽度后动态补偿。
真正难排查的白边，往往藏在“已清零”的假象里——比如你写了 body { margin: 0; }，但忘了 html 还有默认 margin；或者清了 margin 却漏了某处 padding: 100px 的硬编码。调试时别信“我肯定清过了”，用开发者工具逐层点开 html → body → 广告容器，看 Computed 面板里每个元素的 margin 和 padding 实际值才是关键。
