47
Vue d’ensemble du modèle de formatage visuel
Figure 3.6
Exemple d’élément dont
la marge supérieure se
fusionne avec la marge
inférieure.
Avant
Après
margin-top : 20px
}
Les marges
s'effondrent
et n'en forment
plus qu'une.
margin-top : 20px
margin-bottom: 20px
Si. cette. marge. touche. la. marge. d’un. autre. élément,. elle. s’effondre. elle-même. à. nouveau.
(voir.Figure 3.7).
Figure 3.7
Exemple de marge
effondrée d’un élément
vide qui fusionne avec
les marges d’un autre
élément vide.
Avant
Après
margin-top : 20px
}
Toutes les marges
s'effondrent et
n'en forment plus
qu'une.
margin-top : 20px
margin-bottom : 20px
margin-top : 20px
C’est.pour.cette.raison.que.les.séries.d’éléments.de.paragraphe.vides.ne.prennent.que.très.
peu.d’espace,.car.toutes.les.marges.s’effondrent.et.fusionnent.pour.n’en.former.plus.qu’une..
L’effondrement. des. marges. peut. dérouter,. mais. il. est. en. réalité. parfaitement. cohérent..
Considérez.une.page.classique.composée.de.plusieurs.paragraphes.(voir.Figure 3.8)..L’espace.au-dessus.du.premier.paragraphe.est.égal.à.la.marge.supérieure..Sans.l’effondrement.
des.marges,.l’espace.entre.tous.les.paragraphes.subséquents.correspondrait.à.la.somme.
de.leurs.marges.adjacentes..Il.serait.alors.le.double.de.celui.du.haut.de.la.page..Grâce.à.
l’effondrement.des.marges,.les.marges.du.haut.et.du.bas.de.chaque.paragraphe.fusionnent.et.
produisent.un.espacement.égal.partout.
Figure 3.8
Les marges s’effondrent
afin que l’espace reste
partout le même entre
les éléments.
Sans effondrement des marges
Avec effondrement des marges
L'espace entre les paragraphes
est le double de celui du haut.
L'espace entre les paragraphes
est identique à celui du haut.
L’effondrement.des.marges.ne.se.produit.qu’avec.les.marges.verticales.des.boîtes.de.bloc.
dans.le.flot.normal.du.document..Les.marges.entre.les.boîtes.incorporées.dans.les.lignes,.
flottantes.ou.positionnées.de.manière.absolue,.ne.s’effondrent.jamais..