CSS 消除导航栏周围的填充答案

【问题标题】：CSS Eliminate Padding Around Navigation BarCSS 消除导航栏周围的填充
【发布时间】：2013-07-19 00:02:57
【问题描述】：

我正在尝试在页面顶部创建一个导航栏，该导航栏与页面顶部齐平，例如 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;
}

【问题讨论】：

你看到的页边距在body标签上。尝试添加类似body { margin: 0; }

标签： css html html-lists navigationbar

【解决方案1】：

您很可能需要使用重置样式。在基本层面上，您可以简单地将以下规则添加到 CSS 的顶部：

* {
  margin: 0;
}

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

【讨论】：

这是第一个有效的答案，所以我会接受它。我真的很喜欢你包含的重置网站html5reset.org。谢谢你:)。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您总是可以尝试使用负像素！

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

【讨论】：