CSSでよく陥るmarginの相殺

CSSコーディングをしていて、必ずといっていいほど使うmargin。
このmarginにはやっかいなことに、相殺ってのがある。
こいつを知らない状態でCSSコーディングをしていくと、「あれー？指定したはずなのに、効いてないじゃーん、プンプン！」ってことになる。（過去にオレもなった）

その相殺、正確にいうと「marginの相殺」について、to-Rの西畑さんのブログにエントリーが公開されてた。
http://blog.webcreativepark.net/2008/07/09-001153.html

最近は、merginは重ならないように設定している（topかbottomに限定してる）が、どうしても使わなければいけないときに、相殺に陥って、頭の中ではわかっているつもりが、「おりょー？」って感じになってる。それが西畑さんのエントリーにより、よりクリアになった。

自分用のメモがてら、皆さんにも紹介という形式ということで。
コメントとトラバで感謝表明。