More than 3 years have passed since last update.

ヘッダーに変な隙間ができる原因2選とそれぞれの解決方法

Posted at 2021-01-26

#どうも7noteです。ヘッダーに隙間ができる謎を解明していきます。

大きく2つの原因が考えられます。

・body,htmlの標準marginが効いている
・ファイルがBOM付きファイルである

それぞれの原因の確認方法を見ていきたいと思います。

ヘッダーの隙間を解決するなら「marginを見る」

※googleChromeでの手順です。ほかのブラウザではボタンやメニューの名称が異なるかも。

[ブラウザを右クリック]→[検証]→[検証ツールのElementsでbodyタグをクリック]→オレンジ色になっている部分があれば標準のmarginが効いているということ。

↓↓↓↓↓↓↓↓↓↓

「初期のmarginは無効化させる」

style.css

/* 無難な書き方 */
body,html {
  margin: 0;  /* 解決するため */
  padding: 0; /* 入れておくと無難 */
}

これで対応できます。

UTF-8には2種類あり、BOM付きのファイルかBOM無しのファイルがあります。
もしBOM付きのファイルだとソース上に謎の1行が増えているはずです。

確認方法

BOM付きか判断できるエディタで、ファイルの文字コードを確認する。
もしBOM付きになっていれば、チェックを外すなどして文字コードを変更。

エディタでBOM付きかどうかを見る方法は→こちら

この写真はBOM無しの例。もしBOM付きであれば「UTF-8(BOM付き)」などの表記になっていたり、文字コードを選択する欄の近くにBOMをつけるかどうかのチェックがあるかを確認します。

原因不明の余白がある時はほぼこの2つの問題のどちらかである場合が多いです。
ふとした瞬間にひっかかってしまいますが、原因さえ知っていれば対策は簡単です。