![見出し画像](https://assets.st-note.com/production/uploads/images/9469768/rectangle_large_type_2_bf481ae8c974b3e4e0c162e88f933593.jpeg?width=1200)
サイト上部の謎の余白。head内の全角が原因。
まずは必要となる部品をつくる。
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が0になった為。
ただ、まだヘッダー上に余白がある。
これは何が原因なのかディベロッパーツールで調べてみる。
→reset.css
body { line-height: 1; } → line-height: 0; にしてみると
余白は消えるが、そもそもreset.cssの書き換えは・・・
色々試行錯誤しながら
<head>内のviewportを削除してみると・・・
余白が消えた!
原因はviewportではなく、<head>のスペースが原因でした。
viewport記述の際、誤って全角スペースを入れてしまったようで・・・
サイトの上部に謎の余白が出来てしまったという。
知らなかった・・・