Le modèle de boîte du W3C (
Box Model) se définit par le calcul de la largeur et de la hauteur des éléments. Depuis la spécification CSS1 du consortium W3 datant de 1996, la largeur totale d'un élément est calculée à l'aide de l'addition
de la 
largeur de son contenu (width),
de sa marge intérieure (ou espace intérieur, padding),
de l' épaisseur de son cadre (border-width),
et de sa marge extérieure (margin).
Il en va de même pour la hauteur (height) comme plus généralement pour toutes les unités de mesure, qui peuvent être employées de manière mixte.
Représentation graphique du modèle de boîte selon le W3C:
Exemple:
Si un élément se voit affecter une largeur de 200 pixels, une hauteur de 100 pixels, un cadre et un espace intérieur de 20 pixels chacun sur tous les côtés, la largeur de l'élément mesure finalement en fait 280 pixels:
20 pour border-left,
20 pour padding-left,
200 pour width,
20 pour padding-right et
20 pour border-right
et sa hauteur atteint 180 pixels:
20 pour border-top,
20 pour padding-top,
100 pour height,
20 pour padding-bottom et
20 pour border-bottom.
Une marge extérieure devra s'ajouter encore à ses valeurs.
La « bogue du modèle de boîte » (angl.: Box Model Bug) dénomme l'erreur des versions plus anciennes d'Internet Explorer (jusqu'à la version 5.5 comprise) consistant à ne pas ajouter l'espace intérieur ni l'épaisseur de la bordure à la largeur du contenu, ce qui est contraire à la spécification du W3. Dans l'exemple précédent, la largeur totale n'atteint que 200 pixels et représente donc uniquement la largeur du contenu définie par width. Après soustraction de 40 pixels pour le cadre et de 40 pixels pour l'espace intérieur (20 à droite et 20 à gauche), il ne resterait au contenu que 120 pixels, ce qui, si vous deviez effectuer une mise en page précise dans les mesures, provoquerait des différences d'affichage non négligeables.
Microsoft a corrigé l'erreur et a introduit avec la version 6 d'Internet Explorer une possibilité permettant de passer d'une interprétation incorrecte à l'autre. Un changement plus fondamental autorisant uniquement l'interprétation correcte du modèle de boîte aurait en effet apporté le problème de l'affichage de pages plus anciennes, dont le code est, certes, conforme, mais qui auraient été montrées différemment que souhaité par Microsoft. Il fallait donc trouver une possibilité de faire part au navigateur du mode d'affichage à utiliser.
On a donc supposé que surtout les pages les plus anciennes, qui n'avaient sans doute été testées, tenant compte du faux modèle de boîte, qu'avec Internet Explorer jusqu'à la version 5.5, ne possédaient pas de déclaration de type de document, ou bien alors une déclaration moins stricte. Partant de là, on a fait dépendre des différentes variantes de type de document utilisées l'interprétation correcte du modèle. Cette solution de détresse a offert l'avantage de pouvoir renoncer à des modifications plus profondes du logiciel.
Les documents comportant une déclaration (X)HTML syntactiquement stricte sont affichés par Internet Explorer 6 en tenant compte du modèle de boîte du W3 - c'est le « mode conforme aux standards » (angl.: standard mode, CSS compat). Aux pages ne comportant pas de déclaration de type de document ou une déclaration moins sévère est appliqué, avec Internet Explorer 6, le modèle de boîte erronné de Microsoft, afin de rester compatible au passé. Ce mode d'affichage est dénommé « mode non conforme » (angl.: quirks mode, back compat).
Les déclarations ne comportant pas l'adresse à laquelle peut être appelée la définition de type de document (DTD) au W3C ont pour effet un retour au mode non conforme, tout au moins parfois pour HTML 4.01.
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Modèle de boîte: type de document HTML 4.01 Transitional sans URI</title>
</head><body>
<p style="width:200px; padding:20px; border:20px solid #66a">
Largeur selon le W3: 280px
</p>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</body></html>
Cet exemple est affiché par toutes les versions d'Internet Explorer et par Opera 7 en tenant compte du modèle de boîte de Microsoft. Les navigateurs basés sur le moteur de rendu Gecko (Mozilla, Firefox, Netscape depuis la version 6) ainsi que Konqueror et Opera jusqu'à la version 6 affichent l'exemple en tenant compte de l'interprétation conforme du modèle de boîte.
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Modèle de boîte: type de document HTML 4.01 Transitional avec URI</title>
</head><body>
<p style="width:200px; padding:20px; border:20px solid #66a">
Largeur selon le W3: 280px
</p>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</body></html>
Ajouter une adresse de DTD suffit à la plupart des navigateurs pour un affichage conforme aux standards.
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<title>Modèle de boîte: type de document HTML 4.01 Strict</title>
</head><body>
<p style="width:200px; padding:20px; border:20px solid #66a">
Largeur selon le W3: 280px
</p>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</body></html>
Tous les navigateurs affichent ce dernier exemple de façon correcte, excepté, comme déjà indiqué, les versions d'Internet Explorer pour Windows jusqu'à la version 5.5 - les versions pour Mac ne sont pas concernées. Il est préférable d'employer cette variante de type de document, car elle est la plus appropriée pour un affichage semblable dans tous les navigateurs.
Explication:
Ces trois exemples attribuent à un élément p des propriétés identiques. Les différences d'affichage résultent uniquement de la déclaration de type de document utilisée.
Comme mentionné dans les exemples, d'autres navigateurs ont maintenant implémenté cette méthode et l'on peut dire que toutes les versions acutelles des navigateurs les plus distribués interprètent le « Doctype Switch ». Opera 7 s'oriente, pour une compatibilité maximum, à Internet Explorer 6. En revanche, Netscape depuis la version 6, Firefox, Konqueror et Safari gardent en vue les standards: le type de document ne sert, dans ces derniers, que pour des corrections d'erreur - mais n'a aucun effet sur le modèle de boîte.
Attention:
Netscape 4.x calcule les dimensions de manière aussi erronnée qu'Internet Explorer 5.5 pour Windows.
Pour un affichage selon le mode conforme aux standards, il est recommandé de noter au début de chaque document une des déclarations de type de document suivantes (sûres):
HTML 4.01 Transitional avec URI
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict (avec ou sans URI)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Veuillez noter que pour XHTML, Internet Explorer 6 n'interprète la déclaration de type de document que lorque celle-ci est notée en toute première ligne. Il s'ensuit que la mention d'une déclaration XML fait retomber ce navigateur dans le mode non conforme.
<?xml version="1.0" encoding="UTF-8"?>
Cette ligne n'étant pas absoluement indispensable lors de l'emploi de XHTML, vous pouvez vous en passez dans les conditions mentionnées.
La solution la plus simple pour contourner l'erreur du faux modèle de boîte est de renoncer à essayer d'obtenir une mise en page précise « au pixel près ». Laissez plutôt aux éléments leur libre-espace, de sorte que certes, certaines différences soient présentes, mais que celles-ci ne gênent pas l'affichage. Si cela devait s'avérer ne pas être possible, orientez-vous à l'une des méthodes suivantes afin d'obtenir l'affichage conforme désiré.
L'une des possiblités d'obtenir un affichage uniforme consiste à renoncer aux notations de width ou height suivies de border/padding pour un seul élément. Ceci s'obtient à l'aide d'un élément supplémentaire auquel vous donnez la largeur souhaitée correspondant au modèle de boîte correct. Vous pouvez maintenant attribuer à l'élément intérieur border et padding sans problèmes, car la largeur de l'élément entourant n'en est pas affectée.
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Modèle de boîte: adaptation avec déclaration de type de document HTML 4.01 Transitional sans URI</title>
</head><body>
<div style="width:280px;">
<p style="padding:20px; border:20px solid #66a">Largeur selon le W3: 280px</p>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</div>
</body></html>
Explication:
À l'élément extérieur est attribuée une largeur de 280px - c'est, comme indiqué au début de ce document, la place en largeur totale que prendrait l'élément intérieur p si lui étaient appliquées les régles d'un modèle de boîte correct. Ici, cependant, ne lui sont attribuées que les valeurs border et padding ce qui de sorte imite, avec l'élément entourant, l'affichage d'un modèle de boîte selon les standards.
Par l'intermédiaire d'un aiguillage CSS, il est possible de fournir aux navigateurs modernes les propriétés CSS souhaitées et de les cacher aux yeux d'autres navigateurs moins compétents. Ceci est aussi appelé « hack CSS ». Les exemples de ce chapitre s'approprient à palier à l'erreur du modèle de boîte.
Veuillez lire attentivement les remarques concernant l'utitlisation des hacks CSS en fin de document.
Pour contourner l'erreur du modèle de boîte d'Internet Explorer 5.x, le hack 'Tan', aussi appelé hack du modèle de boîte modifié et simplifié, est particulièrement approprié:
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Modèle de boîte: adaptation à l'aide du hack du modèle de boîte modifié et simplifié</title>
<style type="text/css">
#domaine {
width:200px; padding:20px; border:20px solid #66a;
}
* html #domaine { /* uniquement pour Internet Explorer */
width:280px; /* Version 5.x */
w\idth:200px; /* Version 6 */
}
</style>
</head><body>
<div id="domaine">Largeur selon le W3: 280px</div>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</body></html>
Explication:
À l'aide du sélecteur #domaine, les propriétés souhaitées sont définies de manière habituelle. Ensuite est noté un autre sélecteur de nom semblable, cependant précédé de * html. Il s'agit ici du hack 'star HTML', lequel exclut tous les navigateurs, sauf Internet Explorer jusqu'à la version 6 comprise, de l'interprétation des déclarations contenues. Dans un premier temps est définie pour Internet Explorer 5.x la largeur selon le faux modèle de boîte de Microsoft, vient ensuite la valeur correcte selon le W3C pour Internet Explorer 6. Afin de ne pas écraser la notation pour IE 5.x, la propriété width est notée avec une barre oblique inversée: w\idth, ce qui a pour conséquence que celle-ci est ignorée par la plus ancienne version.
La page sur les aiguillages CSS explique le fonctionnement du hack 'Tan'.
L'aiguillage CSS appelé hack 'Tantek' corrige également l'affichage erronné d'Internet Explorer 5.x pour Windows.
Exemple d'affichage: aperçu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Modèle de boîte: adaptation à l'aide du hack 'Tantek'</title>
<style type="text/css">
#domaine {
padding:20px; border:20px solid #66a;
width:280px;
voice-family:"\"}\"";
voice-family:inherit;
width:200px;
}
</style>
</head><body>
<div id="domaine">Largeur selon le W3: 280px</div>
<p><img src="regle.gif" width="300" height="20" alt="Règle"></p>
</body></html>
Explication:
En premier lieu sont notées toutes les propriétés dont a besoin Internet Explorer 5.x pour un affichage correct. La déclaration voice-family:"\"}\""; a pour effet que toutes les notations qui suivent sont ignorées par ce navigateur. De telle sorte, ces déclarations sont appropriées pour tous les autres navigateurs. Le résultat est un affichage comparable - malgré l'erreur du modèle de boîte de IE 5.x.
La page sur les aiguillages CSS explique le fonctionnement du hack 'Tantek'.
Un simple commentaire HTML en toute première ligne du document (donc avant le doctype) a pour effet qu'Internet Explorer 6 ou 7 retombe dans le mode non conforme. Les autres navigateurs ne seront pas influencés par une telle notation et appliqueront le modèle de boîte correctement - si toutefois la déclaration de type de document le permet. Ceci donne la possibilité d'effectuer des corrections ne concernant qu'Internet Explorer pour Windows - mais attention: toutes les versions de ce navigateur seront concernées. Il reste à espérer que les futures versions de Microsoft Internet Explorer seront capables d'afficher ce genre de document de façon conforme aux standards du W3C et que cette méthode restera celle qui vous permettra, en dernière éventualité, d'effectuer les corrections nécessaires.
© 2007 Redaktion SELFHTML / © 2008 Traduction Patrick Andrieu
selfhtml@fr.selfhtml.org
SELFHTML/Aides à la navigation 
Calcul de la largeur et de la hauteur
Navigateurs interprétant un 'Doctype Switch'
