シンプルなHTML /これは本当に簡単なHTML/CSSを使ってCSSボックスモデルの混乱

Question

（http://jsfiddle.net/XXzTj/）

<div style="background-color:red;"> 
<div style="margin:12px; background:blue;">hello</div> 
</div> 

マージンが正しく、すべてのラウンドの12ピクセル間隔を置いて配置されていますが、私は親要素の赤色の背景を示すことを期待していました上部と下部の12ピクセルのスペースではなく、単に '空白のスペース'です。

私は怒っているのですか、間違ったことをしましたか？

Answer 1

この試す -

<div style="background-color:red;height:auto;overflow:hidden;"> 
<div style="margin:12px; background:blue;">hello</div> 
</div> 

http://jsfiddle.net/XXzTj/1/

Answer 2

ない理由ありえないが、正直に働いたが、これは仕事をしすぎて確認してください：子のdiv

<div style="background-color:red; padding:12px;"> 
    <div style="background:blue;">hello</div> 
</div> 

Answer 3

をあなたが使用しているため、親divがその周囲からオフセットされてレンダリングされているmarginプロパティ。親divにはコンテンツがないので、ブラウザは子divの上または下にスタイルを適用する必要はありません。

ただし、にはにコンテンツがある子divの余白プロパティを使用するため、親divはコンテンツの両側の背景でレンダリングされます。

ブラウザで期待通りにレンダリングするには、paddingスタイルを適用する必要があります。これは親のdivに内容がないためです。パディングは本質的にはのコンテンツのようなスペースのように動作するので、パディングはそのスタイルを領域内でレンダリングするよう強制されます。

Answer 4

実際にはcollapsing marginsです。子1の親要素のpaddingの代わりmarginを使用し、またはposition: relativeを設定することで、新しいコンテキストを作成し、overflow: auto/scroll/hidden、または崩壊マージンを防ぐために、親要素にdisplay: blockで生成されたコンテンツ（:beforeと:after pseudoelements）を追加してください。