marginの相殺

ボックスをおいていくと、マージンが相殺されて意図したとおりに表示されない場合がある。
相殺される原因というか要因は
・どちらもfloatが指定されていない
・どちらもpositionがabsoluteではない
上記2点の要因をふたつとも満たした場合のみ、相殺される。
逆にいうと、上下に並んだボックスの場合、どちらかがfloat指定されている、もしくはどちらかがposition: absoluteだと相殺されない。
　
が、基本的にそれを満たすことは少なく…。
　
相殺される場合、マージンの最終的な算出は
・正の値のマージンが隣り合った場合、指定された正の値が大きな方のマージンを採用する。
・正の値と負の値のマージンが隣り合った場合、両方の値を足しあわせた値を採用する。
・負の値のマージンが隣り合った場合、指定された負の値が大きな方のマージンを採用する。
となる。
　
box1とbox2が上下に並んだ場合
例１）

#box1 { margin: 0px 0px 10px 0px; }
#box2 { margin: 30px 0px 0px 0px; }

この場合はbox1とbox2の間はbox2の設定が優先されて30pxとなる。
　
例２）

#box1 { margin: 0px 0px 30px 0px: }
#box2 { margin: -10px 0px 0px 0px; }

この場合は30+(-10)で20pxとなる。
　
例３）

#box1 { margin: 0px 0px -30px 0px; }
#box2 { margin: -20px 0px 0px 0px; }

この場合はbox1の設定が優先されて-30pxとなる。