删除左侧填充 css答案

【问题标题】：Remove left padding css删除左侧填充 css
【发布时间】：2016-05-30 18:16:41
【问题描述】：

我正在尝试创建一个简单的固定导航栏，但计算机屏幕左侧有一个白边/填充，我不知道如何摆脱。

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>

【问题讨论】：

请添加一个工作样本，这将有助于我们了解正在发生的事情..
将left:0px; 添加到#menu-bar

标签： html css

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

这很可能是正文的默认边距。您可以使用以下内容将其设置为 0：

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

更多信息请参见here

【讨论】：

【解决方案3】：

只需将margin: 0; 添加到正文即可删除其默认边距样式。示例如下：

body{
   margin:0;
}
#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;
}

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

【讨论】：

【解决方案4】：

您需要删除<body> 元素上的默认边距：

#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;
}
body {
  margin:0;
}

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

【讨论】：

我不明白为什么需要删除默认边距，因为它是 fixed 定位
@Pogrindis - 由于在固定元素上没有指定左侧位置，所以正文的默认边距仍然会影响布局。
同意，但我更倾向于应用 left:0; 而不是操纵父母，身体上的填充有点预期。
@Pogrindis 但是，仅通过更改菜单栏的左侧位置，页面的其余部分仍会受到正文边距的影响，这会使所有内容不对齐。您的建议是有效的，但也取决于 OP 的其余布局。