누출 마진 : 중첩 된 DIV로 인한 예기치 않은 오프셋

Question

상위 컨테이너에서 중첩 된 DIV의 여백 "누출"과 함께 설명 할 수없는 이상한 점이 있습니다.

다음 테스트 케이스 *이 아마 가장 잘 설명 :

http://jsbin.com/ibaze

외부 래퍼 (빨간색)이 시작되지 않습니다 맨 - 텍스트 노드 또는 overflow: auto;에이 아니라면 그 요소. (Firefox 및 Safari에서 테스트되었습니다.)

오버플로가 문제를 해결할 수 있지만 처음부터 왜 그런 일이 발생했는지 알고 싶습니다. 통찰력을 얻으실 수 있습니다!

 은 *이 왜 작동하지 않는 CSS에 수직 마진이 동작을 예상되는 붕괴된다는 것이다 단지 해결 방법

Answer 1

이유를 설명 하단에 스크립트를 제외하고 최소한의 테스트 케이스입니다.

#inner에서 마진을 제거하고 대신 #outer에 padding: 50px; 원하는 결과를 얻으려면 지정

: 수직 마진 축소에 대한 자세한 내용은

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    color: white; 
    background-color: blue; 
} 

#outer { 
    padding: 50px; 
    background-color: red; 
} 

#inner { 
    background-color: green; 
} 

을, 나는 다음과 같은 기사를 읽고 추천

CSS - Auto-height and margin-collapsing