ウェブページの上に奇数のスペースが生じるCSS

Question

テストページで、私はこの奇妙な間隔をページ上部に表示していますが、なぜこれがわからないのですか？

あなたは以下のCSSからもわかるように、bodyタグが0

に設定マージンやパディングがここに私は間隔によって何を意味するかを確認するために、テストサイトのURLのしている：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>タグの余白は30pxです。

これは、インスペクターと呼ばれている：

はそれを乱用し、それを愛し、それを学びます。

Answer 2

これは、h1要素の先頭の余白です。

Answer 3

ほとんどの要素を初期リセットすることを検討する必要があります。これは当初より多くの作業を意味しますが、制御を大幅に強化し、トラブルシューティングを大幅に簡素化します。

Meyer resetは非常に一般的な出発点です。