DEVENIR-WEBMASTER.COM Log In
 29
Faire le quizz link W3C close

Comprendre la fusion des marges

Visiter ma chaine Youtube

# Qu'est ce que la fusion des marges ? close

Dans cet exemple je place simplement deux paragraphes l'un derrière l'autre.

Pour les paragraphes la feuille de style du navigateur spécifie une marge supérieure de 1em et une marge inférieure de 1em.

Pour avoir ces informations on peut prendre les outils webmaster de Chrome en tapant CTRL+MAJ+J.

Marges par défaut des paragraphes.

On peut constater qu'entre les deux paragraphes il ne reste qu'un espace de la taille d'une seule marge.

Fusion de marge entre deux paragraphes.

On dit qu'il y a eu fusion des marges. Notez bien que l'on parle des marges supérieure et inférieure pas des marges gauche et droite. Et que dans ce cas là il s'agit d'une fusion des marges entre deux éléments frères.

# Quelle est la taille de la marge après la fusion ? close

Dans l'exemple précédent les marges inférieure et supérieure avaient la même taille.

Dans cet exemple je vais spécifier 1em pour la marge supérieur et 2em pour la marge inférieure des paragraphes.

La marge après fusion aura la taille de la plus grande des deux marges.

# La fusion de marge entre parent et enfant close

Nous abordons ici une autre configuration de fusion de marge. Le nombre de cas qui peuvent être rencontrés est plus important ce qui en fait une configuration plus complexe.

Fusion de marge entre parent et enfant

Dans cet exemple les marges du body ont été mises à 0 pour ne pas interférer. La marge du paragraphe fusionne avec celle du div parent. C'est la marge du div parent qui est la plus grande. La marge fusionnée prend cette taille.

# Conditions pour que la fusion ait lieu. close

Les marges parent enfant doivent être attenantes.

En fait les marges doivent se toucher pour pouvoir fusionner. Ici on a mis un border entre le contenu du div et sa marge supérieure. Ce qui fait que la marge supérieure du paragraphe est séparée de la marge supérieure du div parent et il ne va pas y avoir fusion. C'est la même chose si vous mettez un padding.

Blocage fusion de marges avec un border

exemple

Blocage de la fusion de marges entre parent et enfant

Par contre si vous mettez la bordure sur le paragraphe enfant au lieu de la mettre sur le parent alors les marges se touchent et là elles vont fusionner. exemple

Le parent doit avoir des caractéristiques précises

Si le display vaut inline-block ou si overflow vaut hidden il n'y aura pas fusion (ou toutes valeurs différentes de visible).

exemple inline-block exemple overflow:hidden

Le positionnement de l'enfant ne doit pas être float ou absolute

exemple avec un positionnement float

Je vous renvoie à la spec pour les cas qui ne sont pas traités ici