2011年4月16日

入れ子ボックス要素にてmargin-top指定時

投稿者: 管理者

入れ子ボックス要素にてmargin-top指定時、ブラウザ毎の解釈の違いがある。

IE　　：親要素と子要素の間にmargin-topが適用される。
IE以外：親要素にmargin-topが適用される。

“Collapsing margins”とは、「空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。」という仕様

1.　高さを指定しない場合は親要素のpaddingを使うか、
2.　高さを指定する必要がある場合は、子要素のポジションをrelativeにして、topを使う。

position: relative;
top: 100px;