2016-11-10 11 views
2

私のヘッダーの上にスペースがあります。私はそれがスペースなしでトップに滞在したい。私はスペースを示す画像を添付しました。ここでヘッダーとページの間のスペースを削除します

enter image description here

私のコードです:

body { 
 
    background-color: red; 
 
} 
 
#example { 
 
    height: 75px; 
 
    background-color: #484848; 
 
}
<header id="example"> 
 
    example 
 
</header>

答えて

3

<body>要素にはデフォルトのマージンがあります。それを削除します。

body { 
 
    background-color: red; 
 
} 
 
#example { 
 
    height: 75px; 
 
    background-color: #484848; 
 
} 
 
body { 
 
    margin-top: 0; 
 
}
<header id="example"> 
 
    example 
 
</header>

+1

これは機能しました。 – Mehmet

+0

どうしてありがとう、トップマージンだけを削除するのですか? – Johannes

+0

@Johannes OPは "私はそれが何の隙間もなくトップに留まることを望んでいる"と述べたため。彼が他のマージンのいずれかを削除したい場合、それは簡単です。 – j08691

0

あなたができる二つのことがあります。 1つはheight: 75pxを削除するので、divは自然な高さ(テキストの高さ)だけをとります。

#examplevertical-align: topを追加して、テキストをトップに移動することができます。divは、同じサイズのままです。

2

多くの要素には、デフォルトの余白やパディングが付いています。

これは、ブラウザのデフォルトスタイルシートによるものです。

あなたの要素、必要に応じにこれを追加します。ここでは

margin: 0; 
padding: 0; 

は、デフォルトのスタイルシートのブラウザが使用する可能性のあるサンプルである:(あなたがより多くのコードを追加しているので)https://www.w3.org/TR/CSS22/sample.html


EDIT

あなたの場合、body要素から余白を削除する必要があります。

body { margin: 0; } 
1

これはあなたの完全なHTMLとCSSの場合は、赤のマージンはとにかくそれが広いことが、できません:あなたのCSSに

html, body { 
    margin: 0; 
} 

を追加

0

これはあなたの問題を解決します。要素本体にはデフォルトでマージンがあります。

body{ 
    margin: 0; 
} 

の先頭にあります。

関連する問題