CSSでよく陥るmarginの相殺

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

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

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

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