Comprendre le modèle de boîte

Auteur: Jérôme Forget. Publié le 4 décembre 2006.

Tout élément HTML réside dans une boîte rectangulaire qui décrit l'espace qu'un élément occupe dans la disposition d'un document. Chaque boîte possède un espace de contenu (pour le texte ou une image par exemple) et des espaces optionnels entourant la boîte que sont les marges intérieures (padding), les bordures (border) et les marges extérieures (margin).

Pour modifier les dimensions des zones, on utilisera les propriétés width, height, padding, margin et border, ou leurs versions longues comme padding-top, margin-left, border-bottom, etc.

Chaque élément est affiché selon son bloc conteneur. Prenons l'exemple suivant:

Le bloc conteneur de l'élément p est l'élément div, qui est son plus proche parent de type bloc. De la même façon, le bloc conteneur de l'élément div est le body. Donc, la disposition de p est dépendante de la disposition du div, elle-même dépendante de la disposition du body.

Chaque boîte influence donc la position et les dimensions des autres boîtes d'éléments.

Notez bien qu'en spécifiant, par exemple, la largeur d'un élément avec la propriété width, c'est la largeur de la zone de contenu qu'on modifie. La largeur des marges intérieures et extérieures ainsi de la bordure s'ajoute à la valeur de width pour donner la largeur réelle de la zone visible de l'élément. C'est une erreur de compréhension fréquente.

Cependant, jusqu'à sa version 6, Internet Explorer pour Windows avait une interprétation différente des propriétés width et height. Ainsi, dans IE/Win, les propriétés width et height désignent la dimension totale de l'élément, en incluant les bordures et les marges, et non seulement la zone de contenu. Il s'agit d'une erreur dans l'implémentation de la norme CSS qui est corrigée avec la version 6 en mode de respect des standards.

• Design Web