【html css】ヘッダー上部の空白を消す方法

f:id:shangtian:20190227214110p:plain

header部分をcssでmargin-top:0;にしても何故か余白が出来きてしまう
ときの原因と対処法が分かったので紹介しておきます。

ちなみにQRコードを生成するサイトを作成中です。
今回の問題はQRコード生成サイトを作る過程で発生しました。

cssでmargin-topをゼロにしてもheader部分の上が空白になっていしまう。

header {
    background-color: #EAE14E;
    height:50px;
    margin-top: 0;
}

空白が空いてしまっているときのcssとhtmlのコード。

body部分のmarginを0に設定しておく

body {
   margin: 0;
}

header内にあるh1タグにid名を振る。今回はid="titile"とした

<header>
   <h1 id="titile">QR code generator</h1>
</header>

このidを降ったh1タグにcssでmargin-topをゼロにする

#title {
   margin-top: 0;
}

これでheader部分の上の空白を消すことが出来た。 f:id:shangtian:20190227215830p:plain

下の２つのコードは変更後のhtmlとcssの全体のコードです。

おそらく大きく２つあると思われる。１つ目はブラウザがデフォルトで
設定しているcssだとbody部分にmargin: 8px;かかってしまっている。

f:id:shangtian:20190227222320p:plain f:id:shangtian:20190227222324p:plain 　　

２つ目はheader内にh1タグなどを追加すると、h1のmarginがかかって
しまっている。

このスクリーンショットのmargin部分の絵をみるとtopとbottomは0では無い。そのため空白ができてしまう。 f:id:shangtian:20190227222558p:plain

header部分に空白が出来るときはcssで

body {
   margin: 0;
}

/* hader部分に入っているh1につけたid*/
#title{
   margin: 0;
}

とすれば解決する。