marginが効かない！？理由はマージンの相殺が起こっているかも

marginの相殺とは

marginを指定しても思った通りに余白ができない事はありませんか？
ブロック要素それぞれにマージンが設定されている場合、値の大きい方のマージンだけで余白が表示されます。
ではどんなケースの時にマージンが相殺されてしまうのでしょうか？

case1．隣接する兄弟要素のマージン

このケースに陥るパターンがほとんどではないでしょうか？
下の図のように、要素1と要素2それぞれにマージンを指定した場合、値の大きい方のマージンが適用されます。

図の左のようなイメージで、30pxの余白ができる思いきや、実は右図のように片方のマージンしか適用されていなかったのです。

case2．親要素と子要素

親要素と子要素のマージンも相殺されることがあります。

下の図は親子要素それぞれのトップとボトムにマージンを設定した場合。
親要素のマージンを相殺して親要素を飛びぬけてしまっています。

このマージン相殺は設定されるブロックに、以下の指定を持たない場合に起こります。

［親要素と子要素のmargin-top］
border、padding、インラインコンテンツ、floatの解除

［親要素と子要素のmargin-bottom］
border、padding、インラインコンテンツ、hight

親要素と子要素が配置されるCSSでは、大抵、上記のような指定はされるので、余り起こらない気もしますが、親子要素はよく使われるので覚えておきたいです。

case3．空のブロック要素

空のブロック要素…　って？と思ったのですが、
今回ケースも、case2と同じく一部指定を持たない場合に起こります。

margin-top： 30px；
margin-bottom： 30px；

と、設定してもマージンは相殺されて30pxで表示されます。
トップとボトムのマージン合わせて60pxの余白ができる訳では無いですよという事ですね。