固定ヘッダー上に謎の余白

先日、ページをコーディングして、ブラウザで確認した時のこと。
サイト全体の固定ヘッダーの上に、謎の余白がある・・・!
特にヘッダー部分のCSSは触ってないはずなのに、なんで?

原因はCSSの抜け+margin値の追加でした。

ヘッダーを固定する時は、以下のようにコードを書くと思います。

position: fixed;

この時、 top: 0; を指定していないと、
コンテンツのmargin-topの指定に引きずられて、謎の余白ができることがある
ようです!

私の場合、見出しタグにmargin-topを付けてから余白が増えたため、原因に気付くことができました。

普通はpositionを指定するときにtopの値も入れると思うので、あまり起こらない事象かもしれませんが、、、
複数人でサイトを管理していると、思いがけないところでつまづいてしまうこともありますね。

タイトルとURLをコピーしました