删除左边填充css

时间：2016-02-18 14:17:08

标签： html css

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

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>

screenshot

4 个答案:

答案 0 :(得分：9)

  

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

     

有些浏览器允许您创建和使用自己的浏览器   用户代理样式表，但如果你正在开发一个网站，我会的   建议远离更改此设置，因为您的用户最多   可能没有经过修改的样式表，然后会看到一个   与你不同的页面。

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

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
}
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="menu-bar">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

只需将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>

答案 3 :(得分：0)

这很可能是身体上的默认保证金。您可以使用以下内容将其设置为0：

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

有关详细信息，请参阅here

相关问题
最新问题