div에서 마진이 작동하지 않는 이유는 무엇입니까?

Question

첫 번째 시차 페이지에서 작업 중이며 callmenick에서 간단한 예를 발견했습니다.

그는 parallax.section을 600px로 설정했습니다. 이미지의 컨테이너이기도합니다.

<section class="module content"> 
    <div class="container">  
    <h2>Lorem Ipsum Dolor</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
    </div> 
</section> 

<section class="module parallax parallax-2"> 
    <div class="container"> 
    <div class="test">Test container</div> 
    <h1>Rise</h1> 
    </div> 
</section> 

나는 내 테스트 사업부와 컨테이너 DIV 사이에 30 PX 마진을 만들 것으로 예상 margin-top: 30px;으로 container DIV 내부 test 사업부를 추가했습니다. 대신 섹션 div 사이에 간격을 만듭니다. 왜 그런가요?

container div에 overflow: hidden을 추가하면이 문제가 해결됩니다. 그러나 여백이 다른 사업부에서 왜 작동하지 않는지 아직도 이해하지 못합니다.

see my fiddle here 수 있습니다. 당신은 collapsing margins을보고있는

section.module.parallax { 
    height: 600px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 

section.module .test{ 
    margin-top: 40px; 
    background-color: #BCEF2F; 
} 

Answer 1

:

사용되는 CSS는 이것이다.

.container { 
    max-width: 960px; 
    margin: 0 auto; 
    overflow:auto; 
} 

jsFiddle example