パソコンQ&A

隣り合うmarginは重なります

スタイルシートのマージンは予想通りの表示がされない時があります。
隣接するマージンは重なります。

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

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

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

例4
The margin: 20px;の中にmargin: 20px;ですが、今回は各divにborderがあります。
例1、2、3を考えどおりに表示したい場合にはそれぞれの領域にボーダーを付けます。

例5
この領域はmargin: 20px;で下に空divでmargin: 20px;があります。
margin: 20px;の空divがあるはずなのに表示されていません。

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

例6
このdivはfloat:left;です。
このdivはclear: both; margin-top: 30px;です。
今度はfloatとclearがあったときの場合です。
(外枠のpaddingは特に影響しません。)
FirefoxとInternet Explorer6では表示が異なります。

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

ちなみにFirefoxの方のために解説ですが、Internet Explorer6で見ると、上下の領域の間隔は20pxです。
こんな感じです。
このdivはfloat:left;です。
このdivはclear: both; margin-top: 20px;です。

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net