マージンの重ね合わせ

どうも、こんにちは。
気づけば夏休み終了まで１週間切ってます。恐ろしいです。ガクガクブルブルです。もっと休んでたい_(：3 」∠)_ 

今回は、復習のつもりで最初の本をパラパラとめくっていた所、ちゃんと理解が出来ていない部分を発見したので、しっかり覚えられるようにここで纏め直してみようと思います。
その部分というのが、ズバリマージンの重ね合わせです。

マージンの重ね合わせとは？

まず、そもそもこのマージンの重ね合わせとはなんぞや？　という事ですが、簡潔に言うと「隣あったボックス、又は親要素と子要素のマージンを重ね合わせてしまう」という感じでしょうか。
・・・これだけだと何のこっちゃですね。具体的に行きましょう。

 まず、HTMLでarticleタグの中にh1タグとpタグが入っているとする。この場合、h1とpのボックスはarticleの子要素となり、articleの構成するボックスの中に入っている事になる。すると、h1とpのボックスはarticleの中で上下に隣り合ってる状態。この時、h1のmargin-bottomとpのmargin-topをそれぞれ10pxにすると、本来なら二つのマージン分余白が出来るので、h1のボックスとpのボックスの間には（パティングの余白やボーダーがないとすると）20px分空くはず。ですが、ここでマージンの重ね合わせがおきて、二つのマージンがピッタリと重なってしまいます。その結果、二つのボックスの間には10px分の余白しか空きません。

もし、片方の長さが違った場合。例えば片方が15pxだった場合には、重ね合わせると15pxの方が10pxより長い分はみ出るので、余白は15px分開く事になります。
少しややこしい言い方ですが、まぁ早い話「重ね合わせが起きた場合は、二つのボックスの内長い方のマージンになる」という事ですね。この覚え方だと色々と誤解しそうですが・・・

親要素と子要素の場合

それじゃあ、親要素と子要素の場合はって事なのですが・・・個人的に、ここの理解にすごい悩みました。お・・・俺だけじゃないよね・・・？

先ほどの例を持ち出すと、親要素のarticle、そのボックスの中に子要素のh1、pのボックスが入っています。そして先ほど言った通り、この親要素と子要素でも同様に、マージンの重ね合わせが起こります。articleのmargin-topとh1のmargin-top、articleのmargin-bottomとpのmargin-bottomが重なるわけですね。

ですが、ここで私はちょっと待てと思いました。
そもそもマージンというのは、ボックスの外側の余白の事をさします。内側の場合はパティングですね。

だとするなら。「子要素は親要素の内側に入っているのだから、その子要素のマージンもまた内側に入っている。そのマージンと、親要素のボックス外側にある親要素のマージンが重なるのはおかしいんじゃないか」と、私は考えたわけです。何分頭が固いもので、中々この事が理解できずに数十分うんうんと唸っていました。

これについては、次に説明する重ね合わせの解除方法にも関わってくるのですが、親要素をボーダーで区切らない限りは、親と子の境界線が分からず余白の区別がつかない事から、重ね合わせが起きるという結論になりました。
正確には背景色をそれぞれ指定すれば目に見えて境界線が分かるわけですが、背景色を変えていなかった場合、余白が親マージンによるものなのか、子マージンによるものなのかは見ただけじゃ分かりませんよね。そんなわけで、親要素と子要素でもマージンの重ね合わせが行われるようです。我ながら、分かりづらい解釈の仕方だなぁとは思いますが・・・

重ね合わせの解除方法

それでは、この重ね合わせはどうやって無くす事ができるのか。これには二つの方法があり、親要素にborderで罫線を表示させるか、paddingでパティングを挿入させるかです。

 borderで罫線を出すのは、先ほどもチラッと話しましたね。こうすることで、親要素と子要素の境界を明確にして、それぞれにマージンを適用させるわけです。実際に罫線を表示させて、articleとh1のmargin-topにそれぞれ10pxを入れると、h1の上にまず10pxの余白が入り、その上に罫線、そのまた上に10pxの余白と、重ね合わせが起きる事無くマージンの余白が表示されます。

paddingでパティングを挿入させる方法は、重ね合わせの起きてる部分の親要素にpaddingで余白を入れると、子要素のマージン→親要素のパディング→親要素のマージンという様に表示されるようになります。恐らく、あくまで重ね合わせが起きるのはマージンの余白のみ、という点をついて解除しているのでしょうね。
ただこっちは、borderの場合と違い結局目で見て親要素と子要素の境界線が判別できないので、先ほどの私の解釈と食い違うのですが・・・
他の解釈を考えないとですかね・・・(´・ω・`)

というわけで、マージンの重ね合わせについてまとめました。
マージンの重ね合わせについて検索すると、結構いろんな方がこれについて書かれているようで、他の多くの人もこの重ね合わせに苦戦したりしているのかなぁとか思ってるのですが、実際どうなんでしょう。
この先も結構この重ね合わせに苦しめられたりするのでしょうかね・・・しっかり理解していれば、大丈夫なんでしょうけど・・・