2011年4月16日
入れ子ボックス要素にてmargin-top指定時
入れ子ボックス要素にてmargin-top指定時、ブラウザ毎の解釈の違いがある。
IE :親要素と子要素の間にmargin-topが適用される。
IE以外:親要素にmargin-topが適用される。
“Collapsing margins”とは、「空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。」という仕様
http://www.awaresoft.jp/blog/5-css/20-margin-collapsing.html
1. 高さを指定しない場合は親要素のpaddingを使うか、
2. 高さを指定する必要がある場合は、子要素のポジションをrelativeにして、topを使う。
position: relative;
top: 100px;