【CSS】margin collapsing（マージンの折り畳み、崩れ、つぶれ）
問題
サイト上部ヘッダ部分に原因不明の隙間ができることがあります。
こんな感じで
上にマージンなんて指定してないのになぜ？
もしかして 「8.3.1 Collapsing margins」
親要素にマージンを指定していないとき、その子要素に margin-top 指定していませんか？
マージンの折り畳みと呼ばる仕様です（CSS2.1の仕様参照）。
現象の確認
例えば赤枠がブラウザのウインドウ、青はよくあるヘッダ部分、ピンクはコンテンツ全体を囲んでいるdiv要素だとして
上のマージンが0pxの子要素
上にボーダー、パディングがない親要素
特におかしな点もなく、ごく普通にレイアウトされる。
上にマージン10pxを指定したボックス
上にボーダー、パディングがない親ボックス
Firefox、IE8、Operaなどで閲覧すると、親要素から上にはみ出るように子要素のマージンがレイアウトされる。
上にマージン10pxを指定したボックス
ここで試しに、親ボックスにボーダーを指定してみる（緑）
子要素は親要素の中でマージンをとる
こういう仕様があるということで、きちんと実装しているブラウザがある。
きちんと実装しているブラウザときちんと実装していないブラウザでは表示が違ってしまう。
そういった事情の他にも、私は自分で書いていて margin-top はレイアウトがイメージしづらく、やりづらいので、マージンをつけるならなるべく margin-bottom で下の方に、レイアウトもmargin-top以外で何とかするようにしています。
margin-bottomでも同様のことが起きるので、paddingが使える状況なら、そっちのほうがベターですよ。
中のマージンの分が外の下の方にはみ出ることもありますね。
私がmarginの方を好きなのはIEのせいでしょうか。。。（paddingがボックスの中に入ってくるとか）