197
Bogues et correctifs
Figure 9.3
Voici le résultat auquel
on s’attendrait avec le
style précédent.
Pourtant,.le.style.donne.le.résultat.présenté.à.la.Figure 9.4.
Figure 9.4
Voici le résultat
que l’on obtient.
Deux.choses.se.passent.ici..Tout.d’abord,.les.marges.de.20 pixels.du.haut.et.du.bas.du.paragraphe.s’effondrent.avec.la.marge.de.10 pixels.de.la.div,.ce.qui.forme.une.marge.verticale.de.
20 pixels..Ensuite,.au.lieu.d’être.encloses.par.la.div,.les.marges.semblent.dépasser.du.haut.
et.du.bas.de.la.div..C’est.l’effet.du.calcul.des.hauteurs.réalisé.pour.les.éléments.possédant.
des.enfants.de.niveau.bloc..
Si.un.élément.ne.possède.pas.de.bordure.verticale.ou.de.remplissage.vertical,.sa.hauteur.
est.calculée.comme.la.distance.entre.les.bords.supérieur.et.inférieur.de.ses.enfants.contenus.. Du. coup,. les. marges. supérieure. et. inférieure. des. enfants. contenus. semblent. dépasser.de.l’élément.conteneur..Il.existe.un.correctif.simple..En.ajoutant.une.bordure.verticale.
ou.un.remplissage.vertical,.les.marges.ne.s’effondrent.plus.et.la.hauteur.de.l’élément.est.
. calculée.comme.la.distance.entre.les.bords.des.marges.supérieure.et.inférieure.de.ses.enfants.
contenus..
Pour.que.l’exemple.précédent.produise.le.résultat.de.la.Figure 9.3,.vous.devez.simplement.
ajouter.un.remplissage.ou.une.bordure.autour.de.la.div :
#box {
margin: 10px;
padding: 1px;
background-color:#d5d5d5;
}
p {
margin: 20px;
background-color:#6699FF;
}
La.plupart.des.problèmes.liés.à.l’effondrement.des.marges.peuvent.être.résolus.en.ajoutant.
un.léger.remplissage.ou.une.bordure.fine.de.la.même.couleur.que.l’arrière-plan.de.l’élément.
concerné..
La.vue.topographique.de.la.barre.d’outils.Web.Developer.est.un.excellent.outil.pour.voir.
comment. les. éléments. interagissent. les. uns. avec. les. autres.. Lorsque. vous. activez. cette.
option,. chaque. élément. reçoit. une. couleur. d’arrière-plan. qui. dépend. de. sa. position. dans.
le.document..Il.est.alors.facile.de.voir.comment.les.éléments.sont.positionnés.les.uns.par.
. rapport.aux.autres.dans.le.document.(voir.Figure 9.5).
Bogues et correctifs
Figure 9.3
Voici le résultat auquel
on s’attendrait avec le
style précédent.
Pourtant,.le.style.donne.le.résultat.présenté.à.la.Figure 9.4.
Figure 9.4
Voici le résultat
que l’on obtient.
Deux.choses.se.passent.ici..Tout.d’abord,.les.marges.de.20 pixels.du.haut.et.du.bas.du.paragraphe.s’effondrent.avec.la.marge.de.10 pixels.de.la.div,.ce.qui.forme.une.marge.verticale.de.
20 pixels..Ensuite,.au.lieu.d’être.encloses.par.la.div,.les.marges.semblent.dépasser.du.haut.
et.du.bas.de.la.div..C’est.l’effet.du.calcul.des.hauteurs.réalisé.pour.les.éléments.possédant.
des.enfants.de.niveau.bloc..
Si.un.élément.ne.possède.pas.de.bordure.verticale.ou.de.remplissage.vertical,.sa.hauteur.
est.calculée.comme.la.distance.entre.les.bords.supérieur.et.inférieur.de.ses.enfants.contenus.. Du. coup,. les. marges. supérieure. et. inférieure. des. enfants. contenus. semblent. dépasser.de.l’élément.conteneur..Il.existe.un.correctif.simple..En.ajoutant.une.bordure.verticale.
ou.un.remplissage.vertical,.les.marges.ne.s’effondrent.plus.et.la.hauteur.de.l’élément.est.
. calculée.comme.la.distance.entre.les.bords.des.marges.supérieure.et.inférieure.de.ses.enfants.
contenus..
Pour.que.l’exemple.précédent.produise.le.résultat.de.la.Figure 9.3,.vous.devez.simplement.
ajouter.un.remplissage.ou.une.bordure.autour.de.la.div :
#box {
margin: 10px;
padding: 1px;
background-color:#d5d5d5;
}
p {
margin: 20px;
background-color:#6699FF;
}
La.plupart.des.problèmes.liés.à.l’effondrement.des.marges.peuvent.être.résolus.en.ajoutant.
un.léger.remplissage.ou.une.bordure.fine.de.la.même.couleur.que.l’arrière-plan.de.l’élément.
concerné..
La.vue.topographique.de.la.barre.d’outils.Web.Developer.est.un.excellent.outil.pour.voir.
comment. les. éléments. interagissent. les. uns. avec. les. autres.. Lorsque. vous. activez. cette.
option,. chaque. élément. reçoit. une. couleur. d’arrière-plan. qui. dépend. de. sa. position. dans.
le.document..Il.est.alors.facile.de.voir.comment.les.éléments.sont.positionnés.les.uns.par.
. rapport.aux.autres.dans.le.document.(voir.Figure 9.5).