래퍼 div의 패딩이 내부 div의 여백과 달라 보이는 이유는 무엇입니까?

Question

나는이 div의

<div id=number1><div id=number2></div></div> 

이 왜

#number1 { 
    background:red; 
} 

#number2 { 
    background:blue; 
    height: 200px; 
    margin: 10px; 
} 

하지

#number1 { 
    background:red; 
    padding:10px; 
} 

#number2 { 
    background:blue; 
    height: 200px; 
} 

으로 그리고 첫 번째 경우에 내가 맨 & 바닥을에서 흰색 라인을 얻을 동일 div 1의 붉은 색으로 보입니까? http://jsfiddle.net/ZbCNq/

Answer 1

the first case에서 예기치 않은 동작은 "여백 축소"때문입니다.

사양 :

• http://www.w3.org/TR/CSS2/box.html#collapsing-margins
• http://www.w3.org/TR/css3-box/#collapsing-margins

일부 쉽게 읽

• http://complexspiral.com/publications/uncollapsing-margins/
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

다음과 같은 방법으로 문제를 해결할 수 :

• #number2에 #number1 대신 margin에 padding를 사용하면 귀하의 질문에 한 적이있다. http://jsfiddle.net/thirtydot/EWeDE/1/
• 이 #number1에 약간의 패딩을 추가 :
• overflow: hidden#number1에 추가 http://jsfiddle.net/thirtydot/EWeDE/2/
• 이 float: left; width: 100%#number1에 추가 : http://jsfiddle.net/thirtydot/EWeDE/3/
• 가 추가 display: inline-block; width: 100%;#number1에 : 테두리를 추가 http://jsfiddle.net/thirtydot/EWeDE/4/
• #number1에 : http://jsfiddle.net/thirtydot/EWeDE/5/
• 더 많은 방법이있을 것이라고 확신합니다.

Answer 2

"패딩"은 "차단"에서 "내용"거리로 사용되기 때문입니다. "여백"은 "차단"에서 "차단"거리에 사용됩니다.