Question

我正在尝试在页面顶部创建一个导航栏，该导航栏与页面顶部齐平，如http://mightytext.net/。但是，我总是在页面的顶部和两侧添加一些白色填充。

如何摆脱此填充，以便内容直接排在页面顶部？

这是我的代码：

<div id='header'>
<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>

#nav {
width: 100%;
float: left;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
background-color: #3498DB;
}
#nav li {
float: left;
}

Answer 1

您很可能需要使用重置样式。在基本级别，您只需将以下规则添加到CSS的顶部：

* {
  margin: 0;
}

但您最好使用众多CSS重置文件中的一个，例如HTML5 Reset或normalize.css。

Answer 2

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

避免这种情况的一个好方法是使用CSS重置，例如here

Answer 3

您可以尝试使用负像素！

#nav {
width: 100%;
float: left;
display: block;
margin: -1px;
padding: 0px;
list-style: none;
background-color: #3498DB;
}

CSS消除导航栏周围的填充

3 个答案: