ヘッダーの上に出来る謎の隙間の「理由」と「対処法」

Web制作初心者の方は意外と困るんじゃないでしょうか。 実際に確認するために、超シンプルなサンプルを作りました。

See the Pen QbXgMe by Setoda Kouki (@LeoTiger) on CodePen.

ヘッダー部分には「margin: 0;」を指定しているのに、上部に隙間が出来ていますね。ついでに左右にも隙間があります。

初心者の頃に結構悩まされたので、対処法を載せておきます。

理由

ブラウザには「デフォルトCSS」というものが指定されていて、指定を上書きしない限りそのCSSが反映されます。デフォルトCSSの一覧はこちらのサイトを参考にどうぞ。 見れば分かる通り、ほとんどのブラウザのデフォルトCSSに「body {margin: 8px;}」が指定されていますね。これがヘッダー上部に隙間が出来てしまう理由です。

対処法

以下のコードをスタイルシートに記述し、デフォルトのCSSに上書きしましょう。

See the Pen MwMoxj by Setoda Kouki (@LeoTiger) on CodePen.

これでヘッダー上部の隙間が綺麗に埋まります。