CSS min-height ajoute à la marge inférieure de l'élément enfant

Question

J'ai eu un problème CSS très étrange. Certaines de mes pages ont affiché un "espace" inexpliqué entre les éléments. L'inspection du code montre que cet espace n'appartient à aucun élément.

Je l'ai réduit, et je pense que je sais pourquoi ce problème se produit. Mais je voulais savoir, sous le capot, pourquoi ça se passe.

La question, je pense, est que min-height: 50px dans le sélecteur #outer ajoute la marge inférieure de #inner ci-dessous #outer, qui se traduit par un espace non expliqué ci-dessus. S'il devait être remplacé par height: 50px, l'espace disparaîtrait.

Ceci se produit sur Chrome mais pas sur FireFox. Ma théorie est que le CSS de Chrome établit d'abord les éléments puis vérifie si l'exigence min-height est satisfaite. Si non, alors il étend la hauteur de la div, en poussant avec lui l'espace inexpliqué. Il est essentiel de copier, ou hérité, la marge inférieure de l'élément enfant. Je pense que cela n'arrive qu'à la marge inférieure cependant.

J'ai essayé deux tests de cette théorie, en ajoutant padding: 1px; et en ajoutant overflow: hidden; ils font tous deux la hauteur de la div pour inclure son enfant et ainsi se débarrasser du problème. Bien que, je pense que dans le cas de overflow: hidden c'est plus couper le contenu survolé.

Mais je ne suis pas expert en CSS, tout cela est que spéculation de ma part, ce qui est la raison pour laquelle je voulais poser cela comme une question :)

Voici le code

#outer { 
 
    background-color: blue; 
 
    min-height: 100px; 
 
} 
 
#inner { 
 
    background-color: red; 
 
    height: 50px; 
 
    margin-bottom: 50px; 
 
} 
 
#bottom { 
 
    background-color: green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div> 
 
<div id="bottom"> 
 
</div>

Answer 1

Ceci est dû à margin collapsing - en particulier la margin-bottom de innereffondrements pour devenir le margin-bottom de l'élément outer.

Solution:

Offrir un border à l'élément outer pour empêcher l'effondrement de la marge - voir la démo ci-dessous:

#outer { 
 
    background-color: blue; 
 
    min-height: 100px; 
 
    border: 1px solid blue; 
 
} 
 
#inner { 
 
    background-color: red; 
 
    height: 50px; 
 
    margin-bottom: 50px; 
 
} 
 
#bottom { 
 
    background-color: green; 
 
    height: 50px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div> 
 
<div id="bottom"> 
 
</div>