私のヘッダーはなぜそんなに低いですか？

上部から20pxのように始まり、上部と整列していません。私がマージントップを行う場合：-15px;すべてがテキストのように動いて見えますが、テキストはもっと上になります。ここに私のCSSコードがある：H1に0：私のヘッダーはなぜそんなに低いですか？

body { 
    background-color: #1a1a1a;  
} 

header, h1 { 
    text-align: center; 
    font-family: CGF Locust Resistance; 
    font-size: 50px; 
    color: lightgray; 
    -webkit-text-stroke: 1.5px black; 



} 

header { 
    margin: 0; 
    padding: 0; 
    height: 100px; 
    border-bottom: 0.5px solid #b3b3b3; 
    background-image: url(omen.png); 
    background-repeat: no-repeat; 
    background-position: center; 

} 

nav { 
    position: relative; 
    top: -5px; 
    margin: auto; 
    padding: 0; 
    list-style: none; 
    width: 100%; 
    text-align: center; 
    border-bottom: 0.5px solid #b3b3b3; 

} 
nav ul li { 
    display: inline; 
    color: white; 
    font-family: CGF Locust Resistance; 
    font-size: 12.5px; 
    padding: 20px; 
} 

.red { 
    color: red; 
}

ここでは、HTMLのマージンを設定し

<!DOCTYPE html> 

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="index.css"> 
     <meta charset="UTF-8"> 
     <title>Gears of War</title> 
    </head> 

    <header> 
     <h1>GEARS OF WAR</h1> 
    </header> 

    <nav> 
     <ul> 
      <li>Gears of War <span class="red">1</span></li> 
      <li>Gears of War <span class="red">2</span></li> 
      <li>Gears of War <span class="red">3</span></li> 
      <li>Gears of War <span class="red">Judgment</span></li> 
      <li>Gears of War <span class="red">4</span></li> 
     </ul> 
    </nav> 
    <body> 


    </body> 
</html>

出典

2016-05-25 Cian OT

これは、これが適用されると思われるHTMLを提供できますか？ –

完了、Im申し訳ありません:) –

'body'に' margin：0'を設定しましたか？ – ray

です。スタイリングのためにパディングを追加することができます。

出典

2016-05-25 00:38:34

ありがとう！ –

私のヘッダーはなぜそんなに低いですか？

答えて

関連する問題