콘텐츠가없는 div가 하위 요소의 영향을받는 이유

Question

나침반 (sass 프레임 워크)으로 일부 css3 애니메이션을 시도했습니다. 내용이없는 div가 우연히 발견되었습니다. 다음은

<div class="box"> 
    <div class="ball"></div> 
    <div class="ball"></div> 
</div> 

말대꾸

@import "compass/css3" 

.box 
    width: 600px 
    height: 600px 
    background-color: pink 
    .ball 
     width: 40px 
     height: 40px 
     +border-radius(100%) 
     background-color: black 
     margin-top: 50px // How to just margin top the ball div 

결과는 다음과 같이보고있다

HTML 내 샘플 코드입니다. div.box는 ball.div 여백 상단 200px를 따르고 있었지만 페이지 맨 위에 머물러 있어야합니다.

하지만 div.box에 일부 콘텐츠를 추가 할 때, 그 결과는 잘 수행하지만 일부 불필요한 내용으로한다.

<div class="box">0 
    <div class="ball"></div> 
    <div class="ball"></div> 
</div> 

나는 호기심 왜 내용이없는 사업부는 자식 요소에 의해 영향을받을 않았고, 어떻게 처리 할 수 ​​있습니다.

Answer 1

@ CBroe의 의견에 따르면
이 문제는 Collapsing margins입니다.

1. 내부 및 외부 소자 블록으로 모두 표시됩니다 때
   문제가 발생한다.
2. 는 속성은 외부 요소에 설정되어 더 국경, 패딩 및 오버 플로우가 없습니다.
3. 외부 요소의 첫 번째/마지막 자식 위치가 float 또는 absolute로 설정되지 않고 나머지 내용이 비어 있습니다.

첫 번째/마지막 자식의 경계가 부모와 병합됩니다.

다음 코드는 당신이 요구하는 어떤 문제

.box 
    overflow: auto // Set overflow attribute to outer element 
    height: 600px 
    background-color: pink 
    .ball 
     width: 40px 
     height: 40px 
     +border-radius(100%) 
     background-color: black 
     margin-top: 50px