marge fuyante: décalage inattendu dû aux DIVs imbriquées

Question

J'ai un peu d'étrangeté inexpliquée avec une marge de DIV imbriquée "fuite" hors du conteneur parent.

Le cas de test suivant * explique sans doute le mieux:

http://jsbin.com/ibaze

L'enveloppe extérieure (rouge) ne démarre pas au sommet - à moins qu'il ya un nœud de texte ou overflow: auto; sur cet élément. (Testé sur Firefox et Safari.)

Alors que le débordement me permet de contourner le problème, j'aimerais bien savoir pourquoi cela se produit en premier lieu. Toute idée serait appréciée!

  * il est un test minimal, sauf pour le script en bas, qui illustre simplement les solutions de contournement

Answer 1

La raison pour laquelle il ne fonctionne pas est que votre marge verticale en CSS croule, ce qui est le comportement attendu.

Retirez la marge de #inner et indiquez plutôt un padding: 50px; à votre #outer pour obtenir le résultat souhaité:

* { 
    margin: 0; 
    padding: 0; 
} 

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

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

#inner { 
    background-color: green; 
} 

Pour plus d'informations sur Marge verticale Collapsing, je vous recommande de lire l'article suivant:

CSS - Auto-height and margin-collapsing