Le positionnement en CSS
CHAPITRE 7
99
Tenir compte des marges et paddings par défaut des éléments de type bloc vous épargnera des soucis ou décalages involontaires avec des balises comme,
CHAPITRE 7
99
Tenir compte des marges et paddings par défaut des éléments de type bloc vous épargnera des soucis ou décalages involontaires avec des balises comme
, …
, , , etc.
Les dimensions des boîtes
La largeur et la hauteur d’une boîte sont calculées en ajoutant celles du contenu aux
dimensions des marges internes et à l’épaisseur de la bordure.
Ainsi, la largeur totale d’un élément prendra en compte la largeur du contenu
(width), les marges internes gauche et droite, et les épaisseurs des bordures gauche et
droite. Il en va de même pour la hauteur (height).
Comme le montre la figure 7-2, un élément dont le contenu s’étend sur 250 pixels de
large et arborant des marges internes (padding) latérales de 20 pixels et des bordures
latérales de 5 pixels occupera à l’écran une largeur totale de : 250 + 20 + 20 + 5 + 5 =
300 pixels.
Différents modèles de boîtes
Le navigateur Internet Explorer (dans ses versions 5 et, sous certaines conditions, 6)
interprète différemment les dimensions des boîtes. Son éditeur (Microsoft) se fonde
sur un modèle non conforme aux recommandations du W3C, et considère pour sa part
que le remplissage et les bordures relèvent de la zone de contenu (voir figure 7-3). Dans
ces conditions, la largeur apparente d’une boîte sera identique à la largeur spécifiée pour
son contenu.
CSS
p {margin: 0;}
Figure 7–2
Dimension de boîte
standard en HTML
, , , etc.
Les dimensions des boîtes
La largeur et la hauteur d’une boîte sont calculées en ajoutant celles du contenu aux
dimensions des marges internes et à l’épaisseur de la bordure.
Ainsi, la largeur totale d’un élément prendra en compte la largeur du contenu
(width), les marges internes gauche et droite, et les épaisseurs des bordures gauche et
droite. Il en va de même pour la hauteur (height).
Comme le montre la figure 7-2, un élément dont le contenu s’étend sur 250 pixels de
large et arborant des marges internes (padding) latérales de 20 pixels et des bordures
latérales de 5 pixels occupera à l’écran une largeur totale de : 250 + 20 + 20 + 5 + 5 =
300 pixels.
Différents modèles de boîtes
Le navigateur Internet Explorer (dans ses versions 5 et, sous certaines conditions, 6)
interprète différemment les dimensions des boîtes. Son éditeur (Microsoft) se fonde
sur un modèle non conforme aux recommandations du W3C, et considère pour sa part
que le remplissage et les bordures relèvent de la zone de contenu (voir figure 7-3). Dans
ces conditions, la largeur apparente d’une boîte sera identique à la largeur spécifiée pour
son contenu.
CSS
p {margin: 0;}
Figure 7–2
Dimension de boîte
standard en HTML
, etc.
Les dimensions des boîtes
La largeur et la hauteur d’une boîte sont calculées en ajoutant celles du contenu aux
dimensions des marges internes et à l’épaisseur de la bordure.
Ainsi, la largeur totale d’un élément prendra en compte la largeur du contenu
(width), les marges internes gauche et droite, et les épaisseurs des bordures gauche et
droite. Il en va de même pour la hauteur (height).
Comme le montre la figure 7-2, un élément dont le contenu s’étend sur 250 pixels de
large et arborant des marges internes (padding) latérales de 20 pixels et des bordures
latérales de 5 pixels occupera à l’écran une largeur totale de : 250 + 20 + 20 + 5 + 5 =
300 pixels.
Différents modèles de boîtes
Le navigateur Internet Explorer (dans ses versions 5 et, sous certaines conditions, 6)
interprète différemment les dimensions des boîtes. Son éditeur (Microsoft) se fonde
sur un modèle non conforme aux recommandations du W3C, et considère pour sa part
que le remplissage et les bordures relèvent de la zone de contenu (voir figure 7-3). Dans
ces conditions, la largeur apparente d’une boîte sera identique à la largeur spécifiée pour
son contenu.
CSS
p {margin: 0;}
Figure 7–2
Dimension de boîte
standard en HTML