垂直方向のマージンの相殺(margin collapsing)についてです。特に難しいことはないですが、レイアウトする時は気にする必要があると思います。
マージンの相殺は、各ブラウザが実装しても、しなくてもいい仕様だそうです。ここで述べられている内容は、Firefox2, IE6, Opera9ではそのとおりになります。ただし、IE6では”haslayout”になると、マージンの相殺は起こらないようです。ご指摘ありがとうございました。

• CSS 2 : Box model
• CSS 2.1 WD : Box model

A.基本

• 垂直方向のマージンは相殺されて、長い方のマージンになる。フロートしたボックス、及びposition: absoluteのボックスは相殺されない。
  
• あるボックスがボックスに内包されている場合、かつ外側のボックスにpaddingとborderが無い場合、垂直方向のマージンは相殺されて長い方のマージンになる。
  
• ボックス内が空の場合は、自分自身の上下マージンも相殺されて長い方のマージンにまとまる。
  

B.Tips

Tipsというほどではありませんが、垂直マージンの相殺は、複数パラグラフの最初と最後のマージンと途中のマージンを同じにする効果があります。マージンを同じにするだけなら、最初のパラグラフにmargin-topでいくらとか、計算する必要はありません。

また、よくある

HTML

<div id="box">
   <p>このパラはmargin 20pxです。</p>
</div>

包含div#boxにmargin:10pxをして、

CSS

div#box {
   margin: 10px;
   background-color:#d5d5d5;
}

p{
   margin: 20px;
   background-color:#6699FF;
}

以下のような結果を期待しても、

以下のようになってしまいます。

これを期待したようにするためには、垂直方向のpaddingかborderを包含ボックスに入れれば良いです。

CSS

div#box {
   margin: 9px;
   padding: 1px;
   background-color:#d5d5d5;
}

p{
   margin: 20px;
   background-color:#6699FF;
}

これで、期待したとおり（上の方の例）の結果になります。