余白（マージン）の確保のされ方
スタイルシートで設定できる余白に「margin」（マージン）プロパティがあります。 例えば以下のように記述すると、段落（p要素）の周囲に10ピクセルの余白を設けることができます。
p {
margin: 10px;
}
このようなスタイルを適用させた状態で、複数の段落を（縦方向に）並べて表示させた場合、段落と段落の間には何ピクセルの余白ができるでしょうか？
段落の周囲に10ピクセルの余白が設けられていて、段落が2つ並んでいるのだから、間は10＋10で20ピクセル……と思いがちですが、そうはなりません。 隣接する段落間（上下）の余白量は、20ピクセルではなく10ピクセルです。合算はされないのです。
上下に隣接する余白(マージン)と
左右に隣接する余白(マージン)の違い
今、次のようなHTMLがあるとします。p要素が並んでいますので、複数の段落（ブロック）が表示されます。
<p>段落1</p> <p>段落2</p> <p>段落3</p>
ここで、次のようなスタイルを記述して、これらの段落（ブロック）を100×100ピクセルの正方形にして、横方向に並べます。
p {
margin: 10px; /* 余白量 */
width: 100px; /* 横幅 */
height: 100px; /* 高さ */
float: left; /* 左に寄せて回り込み */
}
このとき、ブロックとブロックの間は何ピクセル空くでしょうか。
実際に表示させてみると、以下のように見えます。
段落1
段落2
段落3
ブロックとブロックの間は、20ピクセル空いています。
それぞれの横の余白（マージン）は10pxですから、10＋10で20pxです。隣接する余白はどちらもそのまま表示され、合算されています。
しかし、縦に並んだ場合は、こうはなりません。
floatプロパティを使わず、普通に縦方向に段落を並べてみると、以下のように表示されます。
段落1
段落2
段落3
ブロックとブロックの間は、10ピクセルです。
それぞれの上下の余白（マージン）は10pxですから、10＋10で20pxになりそうですが、ここでは合算されません。
上下に隣接する余白（マージン）は、どちらか大きい方の値が採用されるからです。
ここでは、上側の余白も下側の余白も両方10pxなので、ボックス間の余白も10ピクセルになります。
仮に、上側の段落の余白が25pxで、下側の段落の余白が12pxだとすると、これらの段落間の余白量は（大きい方を採って）25ピクセルになります。
おわりに
このように、上下と左右とでは、余白（マージン）の確保のされ方に違いがあります。 スタイルシートを使って細かくデザインする際などには、注意して下さい。
なお、「マージン」（margin／枠線から外側の余白）ではなく「パディング」（padding／枠線から内側の余白）を使って作成された余白は、隣接していてもそのまま合算して表示されます。 （大きい方だけが採用されたりはしません。）
