Le dimensionnement des éléments

2. Le contenu

Pour spécifier complètement la dimension d'un élémentde type bloc, il faut aussi connaître la dimension du contenu. Suite à des dissentions dans le monde des navigateurs, ceci peut maintenant se faire de deux manières différentes. Nous feront usage des notations introduites à la page précédente.

La guerre des navigateurs

Les données mentionnées à la page précédante 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 du cadre.

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 naviga­teur Internet Explorer (IE) de Microsoft, pour qui width et height désignaient la lar­geur et la hauteur incluant la marge inter­ne et le cadre, alors que les standards du consortium W3C, adoptés par le reste des naviga­teurs,

stipulaient que width et height devaient désigner la largeur et la hauteur du con­tenu seul. 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 » (comme on les appelle en anglais) 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 :

  • wc et hc la largeur et la hauteur du contenu seul ;
  • wb et hb la largeur et la hauteur du contenu plus la marge interne et le cadre ;
  • wm et hm la largeur et la hauteur totales de l'élément, 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 le cadres ; 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

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).

Accueil