HTML 没有触及浏览器的顶部

Question

我的网站没有触及浏览器的顶部。顶部几乎没有间隙。

公开地说， body 没有接触到窗口的顶部，我希望它接触到顶部。

HTML:

<div id="container">
    <div id="header">
        <h1>
            Example
        </h1>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
</div>

CSS:

#container
{
    margin: 0 auto;
    width: 350px;
    background: #fff;
    float: left;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 350px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover 
{ 
    background: #383; 
}

这里是例子:

http://jsfiddle.net/deerox/YxwqX/

Answer 1

快速修复，风格化 body 和 html 标签，如下所示:

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

进一步阅读，CSS 重置:

CSS 重置(或“重置 CSS”)是一组简短的、通常压缩(缩小)的 CSS 规则，可将所有 HTML 元素的样式重置为一致的基线。

如果您不知道，每个浏览器都有自己的默认“用户代理”样式表，它用于使无样式的网站看起来更清晰。例如，大多数浏览器默认将链接设置为蓝色，将已访问的链接设置为紫色，为表格提供一定量的边框和填充，将可变字体大小应用于 H1、H2、H3 等，并对几乎所有内容应用一定量的填充。有没有想过为什么提交按钮在每个浏览器中看起来都不一样？

显然，这给 CSS 作者带来了一定程度的麻烦，他们无法弄清楚如何让他们的网站在每个浏览器中看起来都一样。 (注意:即将发布关于为什么这是一个错误概念的文章!)

使用 CSS Reset，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器差异。

( source )

资源:

我正在使用 HTML5 reset , 这是我的最爱。

其他常用的重置技术可以在 http://cssreset.com/ 的首页一起找到。