44
Maîtrise des CSS
La CSS 2.1 contient aussi la propriété outline (contour). À la différence des bordures, les contours sont
dessinés par-dessus la boîte de l’élément et n’affectent ni sa taille, ni son positionnement. Ils peuvent
donc être utiles pour corriger des bogues, car ils n’altèrent pas la mise en page. Les contours sont pris en
charge par la plupart des navigateurs modernes, dont Internet Explorer 8, mais ils ne sont pas reconnus
par Internet Explorer 7 et ses versions antérieures.
Le. remplissage,. les. bordures. et. les. marges. sont. optionnels. et. valent. zéro. par. défaut.. De.
nombreux.éléments.se.voient.cependant.attribuer.des.marges.et.un.remplissage.par.défaut.
par.la.feuille.de.styles.de.l’agent.utilisateur..Vous.pouvez.redéfinir.ces.styles.de.navigateur.
en.ramenant.les.propriétés.margin.ou.padding.de.l’élément.à.zéro..Vous.pouvez.le.faire.au.
cas.par.cas.ou.pour.tous.les.éléments,.à.l’aide.du.sélecteur.universel :
* {
margin: 0;
padding: 0;
}
Rappelez-vous.simplement.que.cette.technique.agit.sans.discernement.et.peut.donc.avoir.
des.effets.indésirables.sur.certains.éléments,.comme.option..Il.est.préférable.de.ramener.
ces.propriétés.à.zéro.de.manière.explicite,.en.utilisant.une.réinitialisation.globale.
En.CSS,.width.et.height.font.référence.à.la.largeur.et.à.la.hauteur.de.la.zone.de.contenu..
L’ajout.d’un.remplissage,.de.bordures.et.de.marges.ne.modifie.pas.la.taille.de.la.zone.de.
contenu.mais.augmente.la.taille.totale.de.la.boîte.de.l’élément..Si.vous.souhaitez.une.boîte.
avec.une.marge.de.10 pixels.et.un.remplissage.de.5 pixels.de.chaque.côté.pour.atteindre.
100 pixels.de.large,.vous.devez.fixer.la.largeur.du.contenu.à.70 pixels.(voir.Figure 3.2) :
#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}
Figure 3.2
Le modèle de boîte
correct.
Largeur : 70px
Marge : 10px
Remplissage : 5px
100px
10px
10px
5px
5px
70px
Maîtrise des CSS
La CSS 2.1 contient aussi la propriété outline (contour). À la différence des bordures, les contours sont
dessinés par-dessus la boîte de l’élément et n’affectent ni sa taille, ni son positionnement. Ils peuvent
donc être utiles pour corriger des bogues, car ils n’altèrent pas la mise en page. Les contours sont pris en
charge par la plupart des navigateurs modernes, dont Internet Explorer 8, mais ils ne sont pas reconnus
par Internet Explorer 7 et ses versions antérieures.
Le. remplissage,. les. bordures. et. les. marges. sont. optionnels. et. valent. zéro. par. défaut.. De.
nombreux.éléments.se.voient.cependant.attribuer.des.marges.et.un.remplissage.par.défaut.
par.la.feuille.de.styles.de.l’agent.utilisateur..Vous.pouvez.redéfinir.ces.styles.de.navigateur.
en.ramenant.les.propriétés.margin.ou.padding.de.l’élément.à.zéro..Vous.pouvez.le.faire.au.
cas.par.cas.ou.pour.tous.les.éléments,.à.l’aide.du.sélecteur.universel :
* {
margin: 0;
padding: 0;
}
Rappelez-vous.simplement.que.cette.technique.agit.sans.discernement.et.peut.donc.avoir.
des.effets.indésirables.sur.certains.éléments,.comme.option..Il.est.préférable.de.ramener.
ces.propriétés.à.zéro.de.manière.explicite,.en.utilisant.une.réinitialisation.globale.
En.CSS,.width.et.height.font.référence.à.la.largeur.et.à.la.hauteur.de.la.zone.de.contenu..
L’ajout.d’un.remplissage,.de.bordures.et.de.marges.ne.modifie.pas.la.taille.de.la.zone.de.
contenu.mais.augmente.la.taille.totale.de.la.boîte.de.l’élément..Si.vous.souhaitez.une.boîte.
avec.une.marge.de.10 pixels.et.un.remplissage.de.5 pixels.de.chaque.côté.pour.atteindre.
100 pixels.de.large,.vous.devez.fixer.la.largeur.du.contenu.à.70 pixels.(voir.Figure 3.2) :
#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}
Figure 3.2
Le modèle de boîte
correct.
Largeur : 70px
Marge : 10px
Remplissage : 5px
100px
10px
10px
5px
5px
70px