删除左边填充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>

Answer 1

在大多数主流浏览器中,默认边距为8px.它由您的浏览器提供的user-agent-stylesheet以像素为单位定义.

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

因此,您可以通过添加以下代码来重置/标准化您的CSS:

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

但是如果你有一个大型项目并希望完全重新使用normalize.css.它会将许多默认值重置为跨浏览器保持一致.祝你好运^ _ ^!