CSSレイアウトをコントロールしよう

CSSでのレイアウト時に、垂直マージンの指定がうまくいかず悩んだことはあると思います。
通常、隣接または入れ子になっている複数のボックスなどでは、重なり合う垂直方向のmarginは統合されてひとつのmarginになります。

これをmarginの相殺と呼びますが、つねに相殺されるわけではありません。
margin間にborderまたはpaddingがあれば相殺は行われないし
floatまたはpositionで配置したボックスもmarginはそのままです。

また、IEのみに存在する親要素にwidthやheightを指定すると相殺されないようになるなど
ブラウザ間で挙動の違いもあるため混乱を招くことが多々あります。ですからCSSの記述はmarginの相殺についてある程度決めてからのほうがスムーズに行えでしょう。

すべて相殺ナシにしたり、marginを使わずにpaddingだけでレイアウトするほうが単純でよさそうですが、たとえば、最下段落の下marginは消えたほうがいいなど、相殺させたいmarginもあります。

ですから、floatさせたり、幅を決めたりといったレイアウトをつかさどる親ボックスでは、marginを相殺させない前提でコーディングし、その中で繰り返される子ボックスでは、相殺を有効にするようコーディングするなど、ある程度規約を決めてコーディングすると良いでしょう。

スタイルシートデザインガイド