网页出现环绕全屏的白色空白，通常是因浏览器默认样式或自定义 CSS 中对 设置了 margin 或 padding；Bootstrap 项目中可直接用 m-0 p-0 工具类重置，无需额外写 CSS。
网页出现环绕全屏的白色空白，通常是因浏览器默认样式或自定义 css 中对 `
` 设置了 `margin` 或 `padding`；bootstrap 项目中可直接用 `m-0 p-0` 工具类重置，无需额外写 css。在开发响应式网站时，许多开发者会意外发现页面四周存在无法解释的“白边”——即使内容已占满视口，边缘仍留有空白。这个问题的根本原因往往被忽略：浏览器对 元素施加了默认 margin: 8px（各主流浏览器一致），而你的 CSS 中又显式设置了 body { padding: 100px; } ——这正是你网站（如 https://www.php.cn/link/e326806ec9f754e7df058498a641fe8b。
虽然 Bootstrap 提供了强大的栅格系统和实用工具类，但它不会自动覆盖浏览器默认的 body 边距，也不会干预你自定义的 padding 规则。因此，解决方法非常明确：
✅ 推荐方案：使用 Bootstrap 内置间距工具类（最简洁、最可靠）
直接为
<div class="container-fluid py-4">
<!-- 你的页面内容 -->
</div>
⚠️ 注意事项：
- 不要将 m-0 p-0 加在 上（可能影响滚动行为或 :root 样式继承）；
- 避免在 CSS 中重复写 body { margin: 0; padding: 0; } ——若已使用 Bootstrap 工具类，纯 CSS 重置反而冗余且易冲突；
- 若需保留顶部导航栏等固定元素的垂直空间，应使用 pt-*（如 pt-5）作用于内部容器，而非给 body 加 padding；
- box-sizing: border-box 虽然推荐用于全局重置（可通过 * { box-sizing: border-box; } 实现），但在此问题中并非主因，无需优先处理。
? 进阶建议：为保障长期可维护性，可在项目入口 CSS 文件顶部添加标准化重置（不依赖框架）：
/* 推荐：现代 CSS 重置（轻量、安全） */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
但对 Bootstrap 项目而言， 是最直接、零学习成本、且完全兼容的解决方案。执行后，白边立即消失，布局即刻贴合视口边缘，同时不影响任何 Bootstrap 组件的正常渲染。
