Pourquoi div n'a pas été influencé par des éléments enfants

Question

J'ai essayé de faire une animation css3 avec une boussole (cadre sass). J'ai trouvé accidentellement que div sans contenu sera influencé. Ce qui suit est mon exemple de code

HTML

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

Sass

@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 

Le résultat est à la recherche comme celui-ci. La div.box suivait la marge de ball.div top 200px, mais je veux qu'elle reste en haut de la page.

Mais quand j'ajoute un contenu en div.box, le résultat est bien performer, mais avec un contenu superflu.

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

Je curieusement pourquoi ne div sans contenu être influencée par des éléments de l'enfant, et comment y faire face. Selon le commentaire de @ CBroe,

Answer 1

Il s'agit d'un appel de problème Collapsing margins.

Le problème se produit lorsque:

1. éléments intérieur et extérieur sont tous deux en tant que bloc d'affichage.
2. Il n'y a pas frontière, rembourrage et trop-plein attributs ont-elles été sur des éléments extérieurs.
3. La position du premier/dernier enfant des éléments externes n'est pas définie comme flottante ou absolue et le contenu reste vide.

La bordure du premier/dernier enfant sera fusionnée avec ses parents.

Le code suivant résoudra le problème

.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