HTML并没有触及浏览器的顶部

Question

我的网站没有触及浏览器的顶部.顶部差距很小.

公然地说,身体没有触及窗户的顶部,我希望它触摸顶部.

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

快速修复,样式化身体和html标签,如下所示:

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

进一步阅读,CSS重置:

CSS重置(或"重置CSS")是一组简短的,经常压缩(缩小)的CSS规则集,它将所有HTML元素的样式重置为一致的基线.

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

显然,这给CSS作者带来了一定的麻烦,他们无法弄清楚如何使他们的网站在每个浏览器中看起来都一样.(注意:文章很快就会说明为什么这是一个错误的概念!)

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

(来源)

资源:

我正在使用HTML5重置,这是我的最爱.

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