謎の余白

HTMLとCSSの勉強をしているとたびたび謎の余白に遭遇することがある。
自力で解決できることもあるが、全くわからないこともある。

今回は、いろいろ調べてみたが結局わからなかったので記事にしてみた。

正解画像はこれ　・・・　　　　↑　　↑　　↑

自分が模写した画像はこれ・・・　↓　　↓　　↓

タイトル部分にマージンが設定されてる。しかし、マージンを設定した覚えはない。

検証ツールで確認してみると、一番下の四角い図にはマージンが書いてあったがCSSの記述を見るとマージンの指定は見当たらなかった。

今回疑問に思った事をまとめてみると
①マージンを指定していないのに勝手にマージンがついているのはなぜ？
②検証ツールの下の四角い図には、マージンが表示されてるのに、検証ツール上のCSSの記載が見つからないのはなぜ？

※検証ツールの見方自体少しあいまいな部分もあるのでもしかしたらどっかに表示されているかもしれないが・・・。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊追記＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
謎の余白の原因が分かった。
この記事に書きました。
（原因のみを知りたい方は下から読んでください。）