网页出现环绕整个页面的白色空白，通常是因 元素默认存在 margin 和用户自定义的 padding（如 padding: 100px）导致；Bootstrap 并不会自动重置这些值，需显式清除。
网页出现环绕整个页面的白色空白，通常是因 `
` 元素默认存在 `margin` 和用户自定义的 `padding`（如 `padding: 100px`）导致；bootstrap 并不会自动重置这些值，需显式清除。在开发中，许多开发者误以为引入 Bootstrap 后页面会“自动撑满视口”，但实际上 Bootstrap 不会覆盖浏览器对 的默认样式——所有现代浏览器均默认为
设置 margin: 8px（Chrome/Firefox/Safari 等），而你的 CSS 中还额外声明了：body {
padding: 100px; /* ❌ 这是白边的主要来源 */
}
这会导致内容被向内推挤 100px，四周形成显著的白色空白区域，即使使用 container-fluid 也无法解决，因为该类仅作用于内部容器，不重置
自身的盒模型。✅ 正确做法是从根元素入手，重置 的默认边距与内边距：
方案一：使用 Bootstrap 工具类（推荐，简洁可靠）
直接在
标签上添加内置间距工具类：
<div class="container-fluid p-3">
<!-- 你的页面内容 -->
</div>
- m-0 → margin: 0 !important;
- p-0 → padding: 0 !important;
Bootstrap 的工具类带有 !important，可有效覆盖原有样式（包括你 CSS 文件中 padding: 100px 的声明）。
方案二：纯 CSS 重置（适合无 Bootstrap 或需深度控制场景）
/* 推荐放在 CSS 文件最顶部，或作为 reset 基础规则 */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
⚠️ 注意：若你已在其他地方（如自定义 CSS 或第三方库）设置了 body { padding: 100px; }，必须确保该重置规则后加载，或添加 !important 以保证优先级：
body {
margin: 0 !important;
padding: 0 !important;
}
验证与调试技巧
- 打开浏览器开发者工具（F12），选中 元素，在右侧 Styles 面板检查实际生效的 margin 和 padding 值；
- 使用 Computed 标签页查看最终计算值，确认是否已被清零；
- 若仍有空白，检查是否存在父级 的 margin（极罕见）或 scrollbar-gutter 等新特性影响（可临时加 html { scroll-behavior: auto; } 排查）。
? 小结：全局白边本质是盒模型失控问题，而非布局结构缺陷。优先使用 body.m-0.p-0 快速修复，避免修改全局 body 样式引发不可预知的连锁影响；同时建议在项目初期引入 CSS Reset 或 Normalize.css，从根本上统一基础样式行为。
