私のdivのマージンは、その中のコンテンツ/ブロックによって影響を受けますか？

Question

私は、次のしている：

<div> 
    <p>some content</p> 
</div> 

か：

<div> 
    some content 
</div> 

なし：

<p>some content</p> 

...のdivの位置が異なっています。 div内のブロックの内容がdivの外側（上部）マージンに影響を与えているように見えます。だからdivが押し下げられたのですか？ブロックのようなdiv内のコンテンツは、包含ブロックのマージンには影響しないと思います。 divの余白がそのコンテンツの内容に影響を受けるのはなぜですか？

Answer 1

margin collapsingのため。あなたのdivにボーダーやパディングを追加してください。

Answer 2

あなたはcollapsing marginsについて話しています。

参照：http://jsfiddle.net/thirtydot/vgJxX/

あなたは親要素に追加することで、 "それを修正する" ことができます。

• border。
• 一部padding。
• position: absolute。
• float: left。

HTML：

<div> 
    <p>I'm doing the "broken" thing you hate.</p> 
</div> 

<div id="d2"> 
    <p>I'm not!</p> 
</div> 

<div id="d3"> 
    <p>Neither am I!</p> 
</div> 

<div id="d4"> 
    <p>Me neither!</p> 
</div> 

CSS：

div { 
    background: #ccc 
} 
p { 
    margin: 20px 0 
} 

#d2 { 
    border: 1px solid red 
} 

#d3 { 
    padding: 1px 
} 

#d4 { 
    position: absolute; 
    bottom: 0; 
    width: 100% 
}