２つの要素に対してmarginを設定したけど、思ったどおりの余白が実装できない、
と困っている方は是非知っておきましょう。
marginの相殺 です。
marginの相殺とは
簡単に言いますと、
marginがぶつかり合ったとき、大きい数値の方のmarginが反映されるということです。
単純に考えると・・・
要素A
-----------------------
要素Aのmargin-bottom:100px;
***********************
要素Bのmargin-top:50px;
-----------------------
要素B
↓
要素A
-------
余白 150px
-------
要素B
-------
になると思いますよね。
実際には
要素A
-------
余白 100px
-------
要素B
-------
となります。
2つのブロック要素の間にあるマージン（100pxと50px）は、大きい方のマージンである100pxのマージンが反映されます。
回避方法
paddingやborderをうまく使って、余白を実装させましょう。
独自の言い回しで説明させて頂きました。大変恐縮です。
詳しく知りたい方はこちらもどうぞ。
margin相殺と回避方法
