46
Maîtrise des CSS
Effondrement des marges
L’effondrement.des.marges.est.un.phénomène.assez.simple.à.comprendre..Il.peut.cependant.
être.très.déroutant.lorsque.vous.travaillez.à.la.structuration.des.mises.en.page..Lorsque.deux.
marges.verticales.se.rencontrent,.elles.s’effondrent.l’une.sur.l’autre.pour.n’en.former.plus.
qu’une..La.hauteur.de.cette.marge.fusionnée.est.égale.à.la.hauteur.de.la.plus.grande.des.
deux.
Lorsque.deux.éléments.se.trouvent.l’un.sur.l’autre,.la.marge.inférieure.du.premier.élément.
fusionne.avec.la.marge.supérieure.du.second.(voir.Figure 3.4).
Figure 3.4
Exemple d’élément
dont la marge
supérieure se fusionne
avec celle de l’élément
précédent.
margin-bottom : 30px
Zone de contenu
margin-top : 20px
Zone de contenu
margin-bottom : 30px
Zone de contenu
Zone de contenu
}
Les marges
s'effondrent et
n'en forment
plus qu'une.
Avant
Après
Lorsqu’un.élément.est.contenu.dans.un.autre.élément.et.qu’il.n’existe.pas.de.remplissage.
ou.de.bordure.séparant.les.marges,.les.marges.du.haut.ou.du.bas.sont.fusionnées.également.
(voir.Figure 3.5).
Figure 3.5
Exemple d’élément
dont la marge
supérieure fusionne
avec la marge
supérieure de son
élément parent.
Avant
Contenu
margin-top : 30px
margin-top : 20px
Après
Contenu
margin-top : 30px
}
Les marges
s'effondrent et
n'en forment
plus qu'une.
Aussi.étrange.que.cela.puisse.paraître,.les.marges.peuvent.s’effondrer.sur.elles-mêmes..Si.
un.élément.vide.possède.une.marge.mais.ni.bordure.ni.remplissage,.la.marge.supérieure.
touche.la.marge.du.bas.et.les.deux.fusionnent.(voir.Figure 3.6).