SAGA.TXT

【css】垂直方向に並んだボックスのmarginは相殺される。

Tweet

■cssのmargin相殺
・垂直方向に並んだボックスのmarginは相殺される。
・margin値が大きい要素のmargin値が採用される。

【例外1】
どちらかのmarginがマイナスの値をもつマージン値の場合(ネガティブマージン)の時は相殺されない。
　margin-bottom:-20px;の要素と、
　margin-top:80px;の要素が並んでいる場合は、
80px-20px=60pxが間に設けられる。

【例外2】
どちらのmarginもマイナスの場合は、相殺され絶対値の大きいmargin値が採用される。
　margin-bottom:-20px;の要素と、
　margin-top:-80px;の要素が並んでいる場合は、
-80pxのマージン値が採用され80px重なって表示される。

【例外3】
ボックス内にボックスがある場合も相殺される。
　margin-top:20px;の要素の中に
　margin-top:80px;の要素が入ってる場合は、
80pxのmargin値が採用される。
→外側のボックスにpadding、borderが設置されてる場合はその分マイナスされるのかな？後で実践してみる。

【メモ】
jQueryのanimateはアニメーション中にアニメーション要素を「overflow:hidden」に変更してしまう。
結果、marginの相殺がおこならくなるのて注意。