■marginの相殺について■
▲マージン相殺のルール▲
・floatの指定がない場合は、縦方向のマージンが相殺される。
・全てのマージンが正の値の場合、最も大きいマージンの値が反映される。
・マージンとネガティブマージンがある場合、最も大きい値と小さい値の差がマージンとなる。
・全てネガティブマージンの場合、絶対値が一番大きいマージンが反映される。
・横方向のマージンは相殺されない。
・フロートのマージンは相殺されない。
・absoluteなど絶対位置で指定されたボックスのマージンは相殺されない。
上のdivには下方向のマージンが40px、
下のdivには上方向のdivが15pxが指定されてます。
ですが実際ブラウザに表示されているのは、
上のdivに指定されている下方向のマージン40pxのみですよね。
こういうように要素同士が縦に隣接している場合、
マージンが重なってどちらか大きい方のマージンが反映されることがあります。
このことをマージンの相殺といいます。
ちなみに左右のマージンは相殺されません。縦方向のみです.
※margin相殺については05_floatとcleaefixの通常フローとマージンの下部にも記載あり。