CSS导致网页顶部奇数间距

Question

在我正在构建的测试页面上，我将这个奇怪的间距显示在页面顶部，我不确定为什么会这样。

从下面的CSS中可以看出，body标签的边距和填充设置为0。

以下是测试网站网址，以查看我所说的间距：http://s361608839.websitehome.co.uk/testsite/index.html

CSS：

body{
background: #4f6ca6;
margin: 0;
padding: 0;
}

#header{
background:url(../images/header_bg.jpg) no-repeat center top;
height: 328px;
width: 100%;
border-bottom: 1px solid #223c6d;
-webkit-box-shadow: 0 8px 6px -6px #254379;
-moz-box-shadow: 0 8px 6px -6px #254379;
box-shadow: 0 8px 6px -6px #254379;       
}

#slider{
width: 960px;
height: 328px;
margin: 0 auto;
}

HTML：

 <div id="header">
 <div id="slider">
 <h1>Test Site</h1>
 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
 </div>
 </div>

Answer 1

这是h1元素的最高边距。

Answer 2

您的<h1>代码的保证金为30px。

这称为检查员：

学习它，喜欢它，然后滥用它。

Answer 3

您应该考虑对大多数元素进行初始重置。这意味着最初会为您提供更多工作，但会为您提供更好的控制并显着简化故障排除。

Meyer reset是一个非常常见的起点。