見出し画像

サイト上部の謎の余白。head内の全角が原因。

ハル@helloco

まずは必要となる部品をつくる。
HTMLはこのように。

<div id="wrap">
    
    <header>
        <h1>ヘッダー</h1>
    </header>
    
    <div id="leftnavi">
        <h2>レフトナビ</h2>
    </div>
    
    <div id="contents">
        <h2>メイン</h2>
    </div>
    
    <div id="rightnavi">
        <h2>ライトナビ</h2>
    </div>
    
    <footer>
        <h2>フッター</h2>
    </footer>
    
</div>

CSSはこちら。

#wrap {
   width: 1000px;
   margin: 0 auto;
}
header {
   background-color: #81F7BE;
   margin: 0;
}
#leftnavi {
   background-color: #A9D0F5;
   float: left;
   width: 220px;
   height: 500px;
   margin-right: 20px;
}
#rightnavi {
   background-color: #D0A9F5;
   float: left;
   width: 220px;
   height: 500px;
   margin-left: 20px;
}
#contents {
   background-color: #F2F5A9;
   float: left;
   width: 520px;
   height: 500px;
   margin: 0;
}
footer {
   background-color: #F5A9A9;
   clear:both;
}
h1 {
   font-size: 20px;
}
h2 {
   font-size: 15px;
}

するとこのようになる。


reset.css 読み込むと・・・

こうなる。

・body margin:8pxが0に。
・h1,h2 上下marginが0に。
　→ reset.cssにより、ブラウザの持つmarginが０になった為。

ただ、まだヘッダー上に余白がある。
これは何が原因なのかディベロッパーツールで調べてみる。

　→reset.css
      body { line-height: 1; } → line-height: 0; にしてみると
　  余白は消えるが、そもそもreset.cssの書き換えは・・・

色々試行錯誤しながら
<head>内のviewportを削除してみると・・・

余白が消えた！

原因はviewportではなく、<head>のスペースが原因でした。

viewport記述の際、誤って全角スペースを入れてしまったようで・・・
サイトの上部に謎の余白が出来てしまったという。

知らなかった・・・