Margin-Top abaissez div externe

Question

J’ai un div d’en-tête comme premier élément dans ma div wrapper, mais lorsque j’ajoute une marge supérieure à un h1 dans le div d’en-tête il pousse le div de l’intégralité de l’en-tête vers le bas. Je sais que cela se produit chaque fois que j’ai appliquer une marge supérieure au premier élément visible sur une page.

Voici un échantillon de la css. Merci !

partie html

Answer 1

mettre dans le parent
Voir plus dans ce lien

Answer 2

Je n'ai pas de réelle explication sur pourquoi cela arrive, mais j'ai corrigé cela en changeant l' top-margin de top-padding, ou l'ajout d' display: inline-block par rapport à l'élément de style.

EDIT: C'est ma théorie

J'ai le sentiment qu'il a quelque chose à voir avec la façon dont les marges sont réduites (combinée).

à partir du W3C Effondrement des Marges:

Dans cette spécification, l'expression l'effondrement des marges signifie que attenant marges (pas de non-vide contenu, de remplissage ou de zones frontalières ou la clairance de les séparer) de deux ou plus de boîtes (qui peut être à côté d'un un autre ou imbriquée) se combinent pour former un seule la marge.

Ma théorie est que, depuis votre premier élément est à côté du corps, les deux marges de combiner et sont appliquées sur le corps: cela force le contenu du corps du commencer en dessous de la appliqué effondré marge en conformité avec le modèle de boîte.

Il y a des situations où les marges ne sont pas d'effondrement qui pourrait être intéressant de jouer avec (à partir de l'Effondrement des Marges):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block's bottom margin.)
* the root element