DIVが空のときに親要素にCSSプロパティが渡される

Question

IE8とChromeでこの問題が起きています。

コンテンツを持たないが、CSSに背景画像と高さ/幅が設定されているDIVを使用して、ヘッダーとメニューを含むサイトを作成しています。私は内部DIVが親divに対してマージンを持つことを望みますが、それは親divにマージンを適用します。 div内にコンテンツを置くと、これが修正されます。 IE7にはこの問題はありません。私は を使いたくないので、物事を捨ててしまい、ハックのように思える。

以下の再作成するコード例を参照してください：あなたは親のdivコンテンツ、さらには国境を与える

<style> 

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
} 

#headerMenu{ 
    height:100px; 
    width:500px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:blue; 
    margin-top:20px; 
} 

</style> 

<div id="header"> 
    <div id="headerMenu"> 
    </div> 
</div> 

場合はレイアウトが正常に動作します。私はこのサイトでこの同じ問題を数回ヒットしました。私は、メニュー項目のリストにマージントップを与えたいと思っていましたが、headerMenu div（その親）にもコンテンツがないので、プロパティをバブルアップしました。

何が起こっているのですか？

Answer 1

あなたはmargin collapsingに掲載されていると思います。

詳細はCSS 2.1 spec on margin collapsingをご覧ください。

Answer 2

#headerのCSSコードにoverflow: autoを追加してみてください。例えば

、

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
    overflow: auto; 
} 

EDIT：だけでなくposition: absolute作品のように思えます。

Answer 3

はい、標準のものです。これはマージンの崩壊と呼ばれ、IE7でそれが見えない理由はIE7が間違っているためです。

マージンは、要素の周りの領域を指定するのではなく、要素間の最小距離を指定するため、少しトリッキーです。マージンの崩壊は、子要素に余白があり、親要素に余白や枠がない場合に発生します。マージンは、子要素と親要素の間ではなく、子要素と周囲の要素との間に適用されます。

いくつかのブラウザ（私が知っているIEのみ）は、余白を正しく処理できないため、今は避けてください。可能であれば、パディングを使用するか、マージンが崩壊するのを防ぐために、パディングや境界線を親に設定してください。

Answer 4

私はちょうどダウン投票は説明していなかったので、私は主にアップ投票してきたとしても、この問題を抱えていたし、CSS

border: 0px solid;