내 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.
• 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% 
}