<h1>标记会在页眉和页面顶部之间产生空格

Question

我正在尝试创建一个看起来至少有点像网页的网页，包含标题和内容以及所有内容，但我遇到了一个问题。我的标题和页面顶部之间有这个奇怪的空间。过了一会儿，我发现<h1>标签是罪魁祸首。我想在那里有大文字，但不知道怎么没有出现这个奇怪的问题。

如何保留<h1>标记，并消除不必要的差距？

＆＃13;

＆＃13;

body {
    margin: 0px;
    height: 2000px;
    background-image: url(http://images6.alphacoders.com/334/334927.jpg);
    background-attachment: fixed;
}
#wrapper {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
#header {
    float: top;
    margin: auto;
    width: 100%;
    height: 70px;
    top: 0px;
    background: grey;
    box-shadow: 3px 5px 5px #555;
}
#content {
    background: white;
    width: 960px;
    margin: 20px auto;
}

＆＃13;

<div id='wrapper'>
    <header>
        <div id='header'>
             <h1>Lorem ipsum dolor sit amet</h1> 
            <!-- if you remove the h1 tags the header fits at the top !-->
        </div>
    </header>
    <div id='content'>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

标题代码从浏览器设置了默认margin。您可以通过执行以下操作重置它：

h1 {
    margin: 0;
}

Answer 2

溢出：自动

如果要保留页边空白但要删除空白，请在父标记上使用overflow: auto。

Answer 3

在CSS中使用以下内容。

        *{
        margin: 0 auto; 
        padding: 0 auto;
    }