Lancersで現役エンジニアに相談してみよう!

【CSS】ヘッダーに予期せぬ余白や隙間ができた時の対処法

コードを間違えたわけじゃないのに、ヘッダーに謎の余白がでてくる…

↑↑この記事では、こんな疑問に答えます。

結論:CSSにこれを記載する

*{
  margin: 0;
  padding: 0;
}

とりあえず、これをCSSの一番上に書いておけばOKです。

余白や隙間ができる理由

そもそも、ブラウザにはデフォルトで様々なタグにmarginが設定されています↓↓

/*【例】Chromeにおけるbodyタグのデフォルト設定*/

body {
display: block;
 margin: 8px;
}

そのため、自分でコードを書く際は、その設定を先述のコードで打ち消してから書くことで、思い通りの動作が可能になります。

※  「*」は「全ての要素を選択する」という意味のセレクタであり、この「*」marginとpaddingを0で指定してあげることで、どんなブラウザでも予期せぬ空白が起きないようにしています。

/*最初と同じコード*/

*{
  margin: 0;
  padding: 0;
}

【後日追記】リセットCSSについて

上述している「*」を利用して余白を消す方法ですが、下記2つの理由から当ブログでは非推奨になりました。

  • ブラウザの表示速度が遅くなる
  • 他にもっと良い方法がある

詳しくは下の記事に記載しています↓↓

【2020年】リセットCSSのおすすめと基本的な使い方まとめ