ページの先頭へ
トップに戻る
2017年2月3日 Web制作

ヘッダー上部に謎の余白が出来てしまう時の対処法

ヘッダーにちゃんとmargin: 0;を指定してるのに、ヘッダー上部と左右に謎の余白が生まれてしまう…これ、Web制作を始めたばかりの初心者の方は結構悩むと思います。

この挙動はバグではなく、しっかりとした理由があります。その理由と解決方法をご紹介。
まずは実際に挙動を見てみましょう。

See the Pen PWRyRp by Kuzlog (@Kuzlog) on CodePen.

ヘッダー上部と左右に8pxの余白が生まれてますね。

勝手に余白が生まれる理由

ブラウザは要素に対してデフォルトCSSというものを指定しており、上書きしない限りそのスタイルがWebサイトに反映されます。

そして、ほとんどのブラウザがデフォルトCSSにbody{margin: 8px;}を指定しています。これが意図しない余白が生まれる原因です。

ヘッダーに余白が生まれてるんじゃなくて、body自体が余白を生み出していたって事ですね。

対処法

bodymargin: 0;を指定して、デフォルトCSSを上書きしましょう。

See the Pen VPXgbY by Kuzlog (@Kuzlog) on CodePen.

これでヘッダー周りの余白が綺麗に消えて無くなりました。簡単!