CSS导致网页顶部出现奇数间距

在我正在构建的测试页面上，页面顶部出现了一个奇怪的间距，我不确定这是为什么

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

下面是测试站点URL，看看我所说的间距是什么意思：

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;
}

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

HTML:

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;
}

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

试验场地
Lorem ipsum dolor sit amet，是一位杰出的献身者。

这是

h1

元素的上边距。

这是

h1

元素的上边距。

您的

标记具有

30px

的边距

这称为检查员：

学习它，热爱它，然后滥用它。

你的

标签有

30px

的边距

这称为检查员：

---

学习它，爱它，然后滥用它。

< P>你应该考虑对大多数元素进行初始重置。这意味着开始时您需要做更多的工作，但可以提供更大的控制，并大大简化故障排除

---

这是一个非常常见的起点。

< P>你应该考虑对大多数元素进行初始重置。这意味着开始时您需要做更多的工作，但可以提供更大的控制，并大大简化故障排除

---

这是一个非常常见的起点。

喜欢你的答案。将不得不开始注意Chrome中的inspect元素功能，以帮助我在将来发现：）谢谢！我喜欢你的答案。将不得不开始注意Chrome中的inspect元素功能，以帮助我在将来发现：）谢谢！