如何使用CSS去除HTML页面左右两侧的默认边距？

问题原因 #

页面出现左右边距有两个核心原因：

• 浏览器默认给body元素设置了默认外边距，你没有做基础样式重置
• 你使用了Bootstrap框架，外层包裹全部内容的.container类默认带有左右内边距，你仅设置了左右margin为0，没有处理padding属性，且Bootstrap默认样式优先级高于你写的自定义样式，原有规则没有生效

解决步骤 #

1. 先重置body默认样式，在你的CSS代码中添加以下规则：

body {
  margin: 0;
  padding: 0;
}

2. 处理外层容器的边距，以下两个方案二选一即可：

• 方案一：修改HTML结构，把最外层的<div class="container">替换为<div class="container-fluid">，Bootstrap的container-fluid类默认适配100%视口宽度，再补充CSS清除其默认左右内边距：

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

• 方案二：不修改HTML结构，直接覆盖原有.container的样式：

.container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

3. 如果修改后还有残留边距，可以补充清除导航栏的默认外边距：

.navbar {
  margin: 0;
}

修改完成后刷新页面即可完全消除左右两侧的边距。

内容的提问来源于stack exchange，提问作者Nassim