marginの考え方。 - ありがとう。また会おう。

わかってたつもりなんだけど、知らなかった。。。
特に

あるボックスがボックスに内包されている場合、かつ外側のボックスにpaddingとborderが無い場合、垂直方向のマージンは相殺されて長い方のマージンになる。

これ、はまってました。。。

<style>
div {margin: 10px ; border-width:0px; padding:0px;}
h1  {margin: 20px ; border-width:0px; padding:0px;}
</style>
 ：
<div>
<h1>見出し1</h1>
</div>

としたときに、イメージ的には、divのボックスの上に10pxマージンができて、
divのボーダーから20px下にh1タグの内容が表示されると思ったら、
border、paddingが0だと、margin相殺するんですね。。。orz
だから、divとh1の間には実際すき間はできず、あたかもdivのmarginが20pxに設定されているような見え方になる。

しかも、Firefoxだと相殺し、IEだとそうじゃない(上記僕の勘違いしたとおりになる)ところがまた腹立たしい。。。

ここんとこ携帯サイトばっかり作ってたんで、久しぶりにPCサイト関わると大変ですわf(^^;;;