Enfant de la marge n'affecte pas les parents de la hauteur

Cela peut être évident pour certains, mais j'ai trouvé qu'il est difficile de trouver la solution pour cela.

Note de la réponse-ers: veuillez passer à "La VRAIE question", merci 🙂

Mais j'ai trouvé qu'il est en dessous de la description du problème:

Le problème:

Dans l'exemple simple comme celui-ci l'enfant marge n'affecte pas les parents hauteur

HTML

<div class="parent">
    <div class="child">Some text...</div>
</div>

CSS

.parent{ background: black; }
.child{
    background: LightBlue;
    margin: 20px;
}

Violon: http://jsfiddle.net/k1eegxt3/

La solution:

Est assez simple, par défaut, l'enfant des marges de ne pas affecter parent hauteur respectivement parent dimensions en général, il est facilement fixé par l'ajout de quelque chose que la marge pourrait "pousser" pour dans l'élément parent, par exemple ajouter un rembourrage ou la bordure d'un parent.

Ajusté CSS:

.parent{ background: black; padding: 1px; /* PADDING ADDED */ }
.child{
    background: LightBlue;
    margin: 20px;
}

Violon: http://jsfiddle.net/fej3qh0z/

La VRAIE question:

Cependant je veux savoir pourquoi cela fonctionne de cette façon, non seulement comment il est fixé,

s'il vous plaît, quelqu'un pourrait s'il vous plaît écrire une réponse expliquant ce comportement et ajouter un peu de DOC références?

Merci beaucoup 🙂