CSS(スタイルシート)講座：各ブラウザの互換性を考慮したCSSを学びたい人にオススメ！
マージンの相殺
この項目につきましては、私の文章力の無さから説明するのは無理だと判断し、その結果、他サイトから引用させていただいたものを掲載しています。
以下の文章はCascading Style Sheets Referenceのマージンの相殺の項目から引用しています。
マージンの相殺（Collapsing margins）
相互に隣り合っているか入れ子関係にある複数のボックス間において，間にパディングもしくはボーダー領域を挟まずに隣接するマージン同士が結合して一つのマージンになることを「マージンが相殺される」（collapsing margins）と言います。
CSS2では，水平方向のマージンは相殺されません。垂直方向のマージンは以下の条件によって異なります：
- 通常に流し込まれる（position の値が 'static' な）複数のブロックボックス間において相殺が行われる。
- 隣接するマージン同士が正の値である場合，最大値が相殺後のマージン幅として用いられる。
- 正負の値が混在している場合，最大値と最小値を足し合わせた値がマージン幅として用いられる。
- 正の値が存在しない場合，隣接するマージンの最小値がマージン幅として用いられる。
- フロート（float の値が 'left' か 'right' のボックス）と他のあらゆるボックスとの間では，マージンは相殺されない。
- 絶対配置（position の値が 'absolute' か 'fixed'）されているボックスにおいては，マージンは相殺されない。
CSSの仕様では上記のようになっていますが、ブラウザによって対応状況は異なります（特にIE5.xやIE6互換モード）。 また、widthなどのプロパティを組み合わせた場合も解釈が異なりますので注意が必要です。
