Le dimensionnement des éléments
Les problèmes de dimensionnement et de positionnement constituent probablement la partie la plus complexe de CSS.
Le dimensionnement des éléments de niveau bloc
En CSS, le dimensionnement des éléments de niveau bloc est basé sur le « modèle de la boite » qui fait intervenir quatre zones. Ce sont, de l'intérieur vers l'extérieur,
- le contenu proprement-dit de l'élément : texte, images, etc., qui forme une région rectangulaire ;
- la marge interne (en anglais : padding). C'est une zone intermédiaire entre le contenu et le cadre, qui joue un peu un rôle de passe-partout ;
- le cadre, aussi appelé bordure (en anglais : border); et finalement
- la marge externe (en anglais : margin), une zone tampon qui empèche que le contenu extérieur à l'élément s'approche trop de la bordure.
Ces quatre zones sont illustées dans la figure suivante :
ml
mr
marge extérieure (margin) mt
pl
pr
marge intérieure (padding) pt
contenu : wc×hc
pb
mb
Il est à noter qu'une (ou plusieurs) de ces zones peut (peuvent) être absente(s).
Largeurs des marges et de la bordure
| Marge extérieure | Bordure | Marge intérieure | |||
|---|---|---|---|---|---|
| margin-top | mt | border-top-width | bt | padding-top | pt |
| margin-right | mr | border-right-width | br | padding-right | pr |
| margin-bodtom | mb | border-bottom-width | bb | padding-bottom | pb |
| margin-left | ml | border-left-width | bl | padding-left | pl |
| Propriété | Valeurs possibles | ||||
| margin-xxx | longueur | pourcentage | auto | inherit | ||||
| border-xxx-width | thin | medium | thick | longueur | inherit | ||||
| padding-xxx | longueur | pourcentage | inherit | ||||
Les deux marges, tout comme la bordure, peuvent chacune être décomposées en quatre parties : le haut (top), le bas (bottom), la gauche (left) et la droite (right). Le haut du tableau à droite donne le nom des propriétés utilisées pour dimensionner chacune de ces parties.
Cette partie du tableau contient aussi les notations que nous utiliserons pour désigner ces différentes largeurs.
Le bas du tableau (où xxx peut être remplacé par top, bottom, etc.) indique quelles sont les valeurs qu'on peut assigner à ces diverses propriétés.
Ces valeurs peuvent être données en pixels ou en cadratins. Elles peuvent aussi être héritées de l'élément parent (inherit).
Pour les marges, on peut aussi spécifier leur largeur comme un pourcentage de la largeur de l'élément parent. La valeur par défaut de la largeur des deux types de marges peut varier d'un élément à l'autre et d'un navigateur à l'autre.
Deux faits sont à noter concernant la marge externe. Le premier, c'est qu'il est possible d'en laisser le navigateur déterminer la largeur, en choisisssant la valeur auto.
Le second, c'est qu'on peut donner à la largeur une valeur négative, ce qui permet de faire deux éléments se chevaucher.
En ce qui concerne la bordure, plutôt que de spécifier une valeur précise, on peut choisir de rester dans le vague et demander qu'elle soit mince (thin), moyenne
(medium, le défaut) ou large (thick).
La guerre des navigateurs
Les données qu'on vient de mentionner ne sont bien-sûr pas suffisantes pour connaitre les dimensions de l'élément : il nous faudrait également savoir quelles sont les dimensions du contenu, par exemple, ou encore les dimensions extérieures de la bordure.
Ceci se fait à l'aide des propriétés width (largeur) et height (hauteur). Mais encore faudrait-il savoir de quelle largeur et de quelle hauteur il s'agit !
Pendant longtemps, il y a eu problème avec le navigateur Internet Explorer (IE) de Microsoft, pour qui width et height désignaient la largeur et la
hauteur incluant la marge interne et la bordure, alors que les standards du consortium W3C, adoptés par le reste des navigateurs,
stipulaient que width et height
devaient désigner la largeur et la hauteur du contenu. C'était un beau casse-tête pour les concepteurs de pages Web !
Heureusement, les choses se sont arrangées depuis et les deux « modèles de boite » sont maintenant disponibles grâce à la propriété box-sizing qui peut prendre les valeurs content-box
(style W3C, le défaut), ou border-box (style IE).
Les modèles de boite
Outre les dimensions précitées, nous sommes aussi intéressés à connaitre les dimensions totales de notre élément, car elles sont également importantes pour le design de notre page Web.
Aux fins de nos calculs, nous désignerons donc respectivement par :
wcethcla largeur et la hauteur du contenu de la boite ;wbethbla largeur et la hauteur de la boite avec la marge interne et la bordure ;wmethmla largeur et la hauteur totales de la boite, incluant la marge externe.
Le modèle « content-box »
Dans ce modèle, qui est le modèle par défaut, les propriétés width et height ont pour valeur wc et hc. On peut donc calculer les
autres dimensions par les formules:
wb = bl+pl+width+pr+br
hb = bt+pt+height+pb+bb
(on additionne les largeurs de la marges internes et de la bordures ; les choses se simplifient un peu si bl = br et pl =
pr et si bt = bb et pt = pb).
Pour les dimensions totales, il faut en plus ajouter la largeur de la marge externe :
wm = ml+wb+mr
hm = mt+hb+mb
Les dimensions totales sont donc :
wm = ml+bl+pl+width+pr+
br+mr
hm = mt+bt+pt+height+pb+
bb+mb
Ce modèle est bien adapté quand les dimensions du contenu sont imposées (par exemple s'il s'agit d'une image). Par contre, la situation est plus compliquée si on désire avoir un élément de dimensions données, cadre inclus.
Le modèle « border-box »
Dans ce modèle, les propriétés width et height ont pour valeur wb et hb. On peut donc calculer les
dimensions du contenu par les formules:
wc = width-bl-pl-pr-br
hc = height-bt-pt-pb-bb
et les dimensions totales sont :
wm = ml+width+mr
hm = mt+height+mb
Ce modèle est plus facile à utiliser pour faire le design de la page Web.
Choix du modèle
Le choix du modèle se fait en utilisant la propriété box-sizing :
| box-sizing | content-box | border-box | inherit |
et en lui donnant la valeur voulue. On peut aussi choisir de faire hériter le modèle de l'élément parent (valeur inherit).
On peut ensuite spécifier la valeur de width :
| width | longueur | pourcentage | auto | inherit |
en donnant une longueur en pixels ou en cadratins ; lorsqu'on utilise un pourcentage, c'est relativement à la largeur de l'élément parent. Généralement, on ne spécifie pas la hauteur : elle est déterminée par la quantité et la taille du contenu.
Il est à noter qu'au lieu de spécifier une valeur précise pour la largeur, on peut spécifier une valeur minimum (min-width) ou maximum (max-width). Ceci est également possible pour la hauteur.
Les éléments en-ligne
Les dimensions des éléments en-ligne sont déterminées par leur contenu : on ne peut donc pas les spécifier. Par contre, il est possible de les doter d'une marge interne et d'une bordure. Il faut être prudent avec
les valeurs qu'on donne à padding-top, padding-bottom, border-top et border-bottom, car si ces valeurs sont trop grandes,
il y aura interférence avec les éléments situés au dessus et en dessous. Il est également possible de munir les éléments en-ligne d'une marge externe à gauche et à droite.