css - CSS 消除导航栏周围的填充

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 重置，就像这里的那样

Answer 3

您可以随时尝试使用负像素！

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