删除左填充 css

Question

我正在尝试创建一个简单的固定导航栏，但计算机屏幕左侧有一个白色边距/填充，我无法弄清楚如何摆脱它。

CSS：

 #menu-bar {
  padding-left: 0px;
  padding-right: 110px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  background-color: #333;
}
#menu-bar a {
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
  text-decoration: none;
}
#menu-bar a:hover {
  color: grey;
}

HTML:

 <div id="menu-bar">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>

原文由 user5139637 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在大多数主流浏览器中，所有边的默认边距都是 8px。它由您的浏览器提供的用户代理样式表以像素为单位定义。

有些浏览器允许您创建和使用自己的用户代理样式表，但如果您正在开发网站，我建议您不要更改它，因为您的用户很可能不会修改样式表，然后会看到不同的样式表比你做的页面。

因此，您可以通过添加以下代码来 重置/规范化 您的 css：

 html,
body {
  margin: 0;
  padding: 0;
}

但是如果你有一个大项目并且想要完全休息使用 normalize.css 。它重置了许多默认值以在浏览器之间保持一致。祝你好运^_^！

原文由 solimanware 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这很可能是主体上的默认边距。您可以使用以下命令将其设置为 0：

 html, body {
  padding: 0;
  margin: 0;
}

请参阅 此处 了解更多信息

原文由 kinggs 发布，翻译遵循 CC BY-SA 3.0 许可协议