Lorsque les marges des éléments internes et externes adjacents s'effondrent

Question

J'ai lu que si un élément est imbriqué dans un autre et qu'ils ont tous les deux des marges, ils peuvent s'effondrer (en supposant que leurs marges verticales se touchent).

a) Dans quelles conditions leurs marges verticales se toucher? Peut-être seulement quand un élément parent a une hauteur fixe, alors que les éléments internes prennent plus d'espace vertical que l'élément parent (j'ai fait un peu d'expérimentation mais je ne pense pas avoir réussi à provoquer les marges verticales adjacentes et l'élément extérieur s'effondrer)?

b) De toute façon, je ne comprends pas pourquoi il est une bonne idée (du point de vue du concepteur) pour faire des marges d'un effondrement de l'élément intérieur et extérieur?

c) En supposant un élément intérieur a une marge de 100px et un élément extérieur d'une marge de 20px, lorsque les deux effondrement des marges alors les deux éléments auront une marge de 100px?

Dans tous les cas, je suis encore avoir du mal à visualiser cela. A savoir, normalement les marges de toucher sont la marge inférieure et la marge supérieure, mais ici les deux marges sont soit marge inférieure ou marge supérieure

Thanx

EDIT:

1) Depuis dans l'exemple suivant (pris à partir du lien que vous avez fourni) les marges de div et h1 effondrement, je pense que la plus grande partie des lettres h1 élément serait de toucher le bord supérieur de élément div (à savoir le haut côté du rectangle orange), mais à la place il y a un peu d'espace (quelques millimètres) entre les lettres et le côté supérieur d'un rectangle. Pourquoi donc?

#masthead {background: #F80; margin: 10px;} 
#masthead h1 {margin: 20px 10px;} 
#masthead p {margin: 5px 10px; font-style: italic;} 


<div id="masthead"> 
<h1>ConHugeCo</h1> 
<p>Making the world safe for super sizes</p> 
</div> 

2) Pourquoi l'application padding provoque les marges (des parents div et de l'enfant h1) ne pas s'effondrer? Parce que maintenant la marge de h1 ne commence pas au même endroit (cet endroit étant le côté supérieur du rectangle orange) comme une marge de parent div?!

Thanx

Answer 1

Eric Meyer connaît une charge de merde sur CSS.

Jetez un coup d'œil sur this article il a écrit sur les marges de réduction, pourquoi elles se produisent et comment les arrêter quand vous en avez besoin.

Modifier: Mise à jour après votre mise à jour.

1) Je suppose que les lettres du h1 ne touchent pas le div en raison de la hauteur de ligne. Une ligne de texte a de l'espace au-dessus de la hauteur de ligne qui n'a rien à voir avec la marge ou le remplissage. Essayez d'ajuster cela si vous voulez qu'ils soient complètement flush.

2) Je ne connais pas le raisonnement exact qui explique pourquoi les marges ne s'affaissent pas lorsque le remplissage est également impliqué. Je vais supposer qu'il a quelque chose à voir avec les spécifications du modèle de boîte ...