文章/答案/技术大牛

发布

社区首页 >问答首页 >移除左填充css

问移除左填充css
EN

Stack Overflow用户

提问于 2016-02-18 14:17:08

回答 4查看 16K关注 0票数 2

我正在尝试创建一个简单的固定导航栏，但是在电脑屏幕的左边有一个白色的边距/填充，我想不出如何摆脱它。

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>

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-02-18 14:19:45

在大多数主流浏览器中，默认的边距是8 8px。它由浏览器提供的用户代理样式表以像素为单位定义。有些浏览器允许您创建和使用您自己的用户代理样式表，但是如果您正在开发一个网站，我建议您不要改变这一点，因为您的用户很可能没有修改过的样式表，然后会看到一个与您不同的页面。

因此，您可以通过添加以下代码来Reset/Normalize您的css：

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

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

票数 13

Stack Overflow用户

发布于 2016-02-18 14:19:36

您需要删除<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>

票数 0

Stack Overflow用户

发布于 2016-02-18 14:21:05

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35483881

复制

相似问题

问移除左填充css
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移除左填充cssEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移除左填充css
EN