本文详解如何通过重置 html 和 body 的默认 margin 与 padding，彻底消除页面顶部/边缘出现的细微线条——这类问题常被误认为是滚动条残留，实则源于浏览器默认样式。
本文详解如何通过重置 html 和 body 的默认 margin 与 padding，彻底消除页面顶部/边缘出现的细微线条——这类问题常被误认为是滚动条残留，实则源于浏览器默认样式。
在现代前端开发中，即使你已使用 overflow: clip 隐藏滚动条，仍可能在页面顶部、底部或侧边看到一条几乎不可见却极其刺眼的细线（通常为 1–2 像素宽，颜色略异于背景）。这并非滚动条残影，而是浏览器对 和
元素施加的默认外边距（margin）和内边距（padding） 所致。大多数浏览器（Chrome、Firefox、Safari 等）默认为 body 设置 margin: 8px，而部分场景下 html 也可能携带隐式间距。当页面背景使用渐变或浅色系时，这一微小 margin 会形成与背景色略有差异的“白边”或“灰线”，尤其在高分辨率屏幕下尤为明显。
✅ 正确解法：全局重置基础容器边距
只需在 CSS 中显式将 html 和 body 的 margin 与 padding 均设为 0：
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 比 overflow: clip 更关键——后者仅控制溢出行为，无法消除初始布局间隙；
- 不要仅重置 body，务必同时重置 html，否则在某些文档模式或 Flex/Grid 布局中仍可能触发继承性边距；
- 若项目已引入 Normalize.css 或 Reset.css，检查其是否覆盖了该规则；建议将 html, body { margin: 0; padding: 0; } 放置于 CSS 文件最顶端，确保优先级；
- 避免使用 * { margin: 0; padding: 0; } 全局重置——它会影响所有元素（如表单控件、列表项），易引发布局错乱。
? 进阶建议：
为保障长期可维护性，推荐在项目入口 CSS 中统一声明：
/* Base reset — minimal & safe */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
min-height: 100vh; /* 推荐替代 height: 100%：更可靠地撑满视口 */
}这样不仅解决细线问题，也为后续响应式布局和 Flex/Grid 布局打下坚实基础。记住：视觉上的“一条线”，往往源于最基础的盒模型设定——回归本质，才能一劳永逸。
