页面底部或边缘出现一条细微线条，通常源于浏览器对 <html> 和 <body> 元素默认的 margin 与 padding，仅设置 overflow: clip 并不能消除该视觉残留；正确做法是显式重置二者为 0。
页面底部或边缘出现一条细微线条，通常源于浏览器对 `` 和 `
` 元素默认的 `margin` 与 `padding`，仅设置 `overflow: clip` 并不能消除该视觉残留；正确做法是显式重置二者为 `0`。在 Web 开发中，即使你已通过 overflow: clip 隐藏滚动条、使用渐变背景填充全屏，仍可能在页面顶部、底部或侧边观察到一条难以察觉的细线（常呈浅灰或白色）。这并非 scrollbar 残留，而是浏览器内置样式所致：所有主流浏览器（Chrome、Firefox、Safari）均默认为 <html> 和 <body> 元素赋予 8px 的外边距（margin），部分还附加少量内边距（padding）。该默认值会破坏 height: 100% 的精确铺满效果，导致背景色未真正抵达视口边界，从而露出底层背景色或父容器边框——即你看到的“烦人细线”。
✅ 正确解决方案是强制归零根元素的盒模型偏移：
html, body {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(180deg, #B26FFF 0%, rgba(225, 199, 255, 0.79) 100%);
overflow: clip; /* 可保留，用于防止意外溢出 */
}⚠️ 注意事项：
- margin: 0 必须作用于 html 和 body 两者：仅设 body { margin: 0 } 不足，因 html 的默认 margin 仍会向外撑开；
- 避免使用 * { margin: 0; padding: 0; } 全局重置：虽有效但过于暴力，可能破坏第三方库（如 Bootstrap）的布局依赖；
- overflow: clip 是现代推荐替代 hidden 的方案（更语义化且不触发滚动上下文），但它不解决默认边距问题，切勿混淆因果；
- 若使用 CSS Reset 或 Normalize.css，请确认其是否已处理 html/body 边距——多数精简版 reset 并未覆盖此项。
此外，检查是否有其他潜在干扰源：
- 父容器（如 <div class="top">）是否设置了 border 或 outline；
- 是否存在未闭合标签或嵌套错误，导致渲染树异常；
- DevTools 中启用「Show layout shifts」或「Box Model」面板，直接悬停查看 html/body 的实际 margin/padding 值。
最终，将上述 CSS 规则加入样式表头部，即可彻底消除那条顽固细线，实现真正干净、严丝合缝的全屏视觉效果。
