パソコンQ&A

例１
上の例ではmargin: 20pxとmargin: 20pxなので、間隔は40pxになりそうですが、実際には20pxです。

例２
margin: 20px;の中にmargin: 20px;があるので２重にマージンができそうですが、実際には中の領域は左右のマージンしかありません。

例３
今度は例２の大枠のボーダーがない場合です。
例２と同じような見た目になりそうですが、今度は２個目の領域も左右のマージンだけになりました。
しかも大枠の上下マージンは指定してないはずなのに付いています。

例４
例１、２、３を考えどおりに表示したい場合にはそれぞれの領域にボーダーを付けます。

例５
margin: 20px;の空divがあるはずなのに表示されていません。

試しにmargin: 20px;の空divだけだと…
上下20pxなので合わせて40pxになりそうですが実際には20pxです。
つまりmargin: 20px;の空divはマージンのみの領域ということで、例１と同様に上下のマージンが重なります。
例５は３つのマージンが重なってしまったということですね。

例６
今度はfloatとclearがあったときの場合です。
（外枠のpaddingは特に影響しません。）
FirefoxとInternet Explorer6では表示が異なります。

Internet Explorer6の方のためにFirefoxでの見た目は下のような感じです。
上下の領域の間隔が30pxを指定してるのに、10px程度になっています。 この場合、clear: both;が入るとCSS2の仕様書ではマージントップは上の領域の上辺から下の領域の上辺までの間隔となります。

ちなみにFirefoxの方のために解説ですが、Internet Explorer6で見ると、上下の領域の間隔は20pxです。
こんな感じです。