浏览器为 <html> 和 <body> 元素默认添加了外边距（margin）和内边距（padding），即使隐藏了滚动条，这些默认间距仍可能表现为页面边缘的细微线条。重置 margin: 0; padding: 0; 即可根除该问题。
浏览器为 `` 和 `
` 元素默认添加了外边距（margin）和内边距（padding），即使隐藏了滚动条，这些默认间距仍可能表现为页面边缘的细微线条。重置 `margin: 0; padding: 0;` 即可根除该问题。在构建现代响应式布局时，一个常被忽视却高频出现的问题是：页面四周或顶部/底部残留一条极细的“白线”或“灰线”——即便你已设置 overflow: clip; 移除了滚动条，该线条依然存在。这不是渲染 Bug，而是浏览器用户代理样式表（User Agent Stylesheet）的默认行为所致。
? 问题根源：浏览器默认 margin 和 padding
所有主流浏览器（Chrome、Firefox、Safari）都会为 <html> 和 <body> 元素隐式应用如下默认样式：
html {
margin: 0;
padding: 0;
/* 实际上部分浏览器（如旧版 Safari 或某些移动端 WebView）可能有非零 margin */
}
body {
margin: 8px; /* ⚠️ 关键！这是最常见的“细线”来源 */
padding: 0;
}即使你的 CSS 中设置了 height: 100% 和 overflow: clip，body 的默认 8px 外边距仍会撑开布局，在背景渐变边缘形成一条视觉上可辨的缝隙（尤其在深色/高对比度渐变背景下尤为明显）。
✅ 正确解决方案：全局重置基础盒模型
只需在 CSS 开头显式重置 <html> 和 <body> 的 margin 与 padding：
html, body {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(180deg, #B26FFF 0%, rgba(225, 199, 255, 0.79) 100%);
overflow: clip; /* 安全移除滚动条（Chrome 119+ / Firefox 119+ 支持） */
}? 提示：overflow: clip 是比 hidden 更语义化且无副作用的选择——它仅裁剪溢出内容，不触发新的层叠上下文或影响 position: fixed 元素定位。
? 常见误区与注意事项
- ❌ 不要只重置 body —— 某些浏览器（如旧版 iOS Safari）会对 <html> 也添加 margin，必须同时声明 html, body。
- ❌ 避免使用 * { margin: 0; padding: 0; } 全局通配符重置——它会破坏表单控件、列表、标题等原生元素的合理默认间距，增加后续调试成本。
- ✅ 推荐做法：将 margin: 0; padding: 0; 作为 CSS 初始化的第一步，再配合现代 CSS 重置方案（如 modern-normalize）实现更稳健的跨浏览器一致性。
- ⚠️ 若项目已引入 Bootstrap 等框架，请注意其 CSS 可能覆盖你的重置规则——确保该重置样式 位于所有第三方 CSS 引入之后，或使用 !important（仅当必要时）。
✅ 最终验证方式
在开发者工具中检查 <body> 元素的 Computed 面板，确认 margin-top/margin-bottom/margin-left/margin-right 均为 0px，且 border-box 尺寸与视口完全吻合。此时细线将彻底消失，背景渐变无缝铺满整个视口。
通过这一微小但关键的重置，你不仅能解决当前的“烦人细线”，也为后续构建像素级精准的全屏布局打下坚实基础。
