默认情况下，html 的 `
` 元素自带默认外边距（margin），导致即使为背景容器设置了 `margin: 0; padding: 0;`，页面边缘仍会出现约 5px 的空白间隙；解决方法是显式重置 `body` 的 margin 和 padding。你遇到的问题非常典型：尽管 .fixed-bg 类已设置 margin: 0; padding: 0; height: 100%; 并使用 background-size: cover，但页面四周仍残留细小间隙（约 5px）。根本原因并非你的 CSS 类有误，而是浏览器对 元素施加了默认样式——几乎所有主流浏览器（Chrome、Firefox、Safari 等）都会为 body 设置 margin: 8px（或类似值），这会直接在视口边缘撑开空白区域，使子元素无法真正“贴边”。
✅ 正确解决方案：全局重置 body 样式
只需在 CSS 文件顶部（或
body {
margin: 0;
padding: 0;
/* 可选：确保 body 占满视口高度 */
min-height: 100vh;
}⚠️ 注意事项：
- min-height: 100vh 很重要：仅设 height: 100% 不够，因为百分比高度依赖父容器高度；而 vh（viewport height）单位直接基于视口，能确保 body 至少撑满一屏，避免内容短时背景被截断。
- 若你使用 Flask 框架，请将上述 CSS 放入静态 CSS 文件（如 static/style.css）并正确引入模板，或内联于 中。
- 避免仅依赖 html { margin: 0; } —— html 元素本身通常无默认 margin，真正“作祟”的是 body。
? 补充建议（提升健壮性）：
为彻底规避浏览器默认样式差异，推荐在项目开头加入轻量级 CSS 重置（无需完整 Normalize.css）：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}这样不仅修复了背景间隙，还统一了盒模型行为，让后续布局更可控。
总结：不是你的 .fixed-bg 写错了，而是漏掉了对 body 的基础样式归零。加上 body { margin: 0; padding: 0; min-height: 100vh; }，即可实现真正的全屏无隙背景覆盖。
