ヘッダーの上のスペースを取り除くにはどうすればいいですか

Question

ウェブページの上部とヘッダーの間のスペースを取り除くにはどうすればよいですか？
これは私のコードです：

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
     
 
#Header { 
 
    background-image: url(space.jpg); 
 
    color: white; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    height: 70px; 
 
    margin-top: 0px; 
 
}

<div id="Header"> 
 
    <p> Weird Title </p> 
 
</div> 
 

 
<a href ="practice.html"> Click here </a>

私はマージントップを試してみましたが、それは動作しません。私が間違っているの何かがあります。

Answer 1

プロパティを正しい間隔に合わせて0に設定する必要があります。

Answer 2

あなたは余裕が代わりにdivのp要素によって作成されているとして、#Header divの内側p要素にmargin-top: 0ルールを適用する必要があります。

ヒントブラウザのデベロッパーツールを使用して要素を選択し、右ペインの/margin/paddingの値をチェックすると、この種の問題を確認できます。

#Header > p { 
    margin-top: 0 
} 

Answer 3

<p> -elementは1emあるすべての主要なブラウザでデフォルトmargin-topを持っています。

希望の結果を得るには、このデフォルトマージンをリセットする必要があります。

#Header > p, /* NEW LINE */ 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#Header { 
 
    /*background-image: url(space.jpg); make thing visible for snippet*/ 
 
    background: #999; /*make thing visible for snippet*/ 
 
    color: white; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    height: 70px; 
 
    margin-top: 0px; 
 
}

<div id="Header"> 
 
    <p> TITLE </p> 
 
</div> 
 

 
<a href ="practice.html"> Click here </a>

注： CSSプロパティの多くは、デフォルト値を持っています。これを一般的に取り除くには、リセットまたはnormalizeあなたのCSSを行うことができます。

Answer 4

以下のコードスニペットに示すように、* CSSセレクタを使用すると、DOMのすべての要素のマージンとパディングをリセットできます。また、ゼロ以外の値を使用する場合は、CSSで単位を指定する必要があります。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
     
 
#Header { 
 
    background-image: url(space.jpg); 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    height: 70px; 
 
}

<div id="Header"> 
 
    <p> Weird Title </p> 
 
</div> 
 

 
<a href ="practice.html"> Click here </a>

エージェントをレンダリングするブラウザは、文書内の各要素を更新する必要がありますように、これは、迅速かつ簡単な解決策ですが、それは大規模なサイトのために不要なオーバーヘッドを提供できることに注意してください。