Définition
Le modèle de boîte (box model) décrit la mise en page par "boîtes", et est au cœur du moteur de représentation HTML de CSS : la spécification utilise le principe des boîtes imbriquées à l'infini (potentiellement) pour mettre en page le contenu d'une page. Bien comprendre le modèle "boîte" est donc primordial pour construire une mise en page CSS... surtout quand on sait que certains navigateurs divergent largement de la spécification lors de l'application des dimensions. Ce modèle est si important que la prochaine version de CSS, CSS3, prévoie d'y consacrer un module entier.

Explication
Avec CSS, le contenu des balises devient boîte, qui elle-même peut en contenir d'autres, et ainsi de suite... Plus précisément, chaque élément du document HTML peut être pris en charge par CSS sous la forme d'une boîte rectangulaire - CSS leur applique ensuite diverses règles de mise en forme visuelle.

Chaque boîte est constituée de quatre éléments : son contenu (texte ou image), son remplissage (l'espace entre le contenu et la bordure - du "blanc"), sa bordure (visible ou pas) et sa marge (l'espace séparant la boîte du reste de la mise en page).

Lorsque l'on parle de dimensions au sein du modèle de boîte, on parle généralement de la largeur (la hauteur étant le plus souvent définie par le contenu). Il faut savoir que celle-ci est censée être la somme de l'ensemble des espaces du modèle : largeurTotale = largeurMarge + largeurBordure + largeurRemplissage + largeurContenu + largeurRemplissage + largeurBordure + largeurMarge. Avoir ceci en tête permet de mieux visualiser le résultat possible des valeurs données à telle ou telle largeur, et l'implication sur l'ensemble de la boîte.

Exception et solution
Seulement, il faut prendre en compte le fait que la norme CSS n'est pas encore parfaitement implémentée parmi les navigateurs les plus utilisés. Notamment, Internet Explorer 5.x se méprend totalement et notoirement sur le calcul exposé ci-dessus : il ne prend en compte que les largeurs de la bordure, du remplissage et du contenu lors de son calcul de la largeur totale, et laisse ainsi de coté la largeur de la marge.
De fait, quand on définit une boîte comme faisant 100 pixels de large, avec un remplissage de 10 pixels et une bordure de 5 pixels, IE5 affiche une boîte dont les bordures gauche et droite sont distantes de 100 pixels. Cela peut sembler correct au premier abord, mais cela devrait être large de 130 pixels : il faut additionner les 10 pixels des bordures (5+5) et les 20 pixels de remplissage (10+10) à la dimension demandée. Si IE5 peut sembler logique, il ne respecte pas pour autant la spécification, au contraire d'Opéra, Safari et Mozilla...
IE6 respecte mieux la norme CSS, mais uniquement quand le bon DOCTYPE est spécifié...

Il faut donc contourner le problème : afficher telle largeur pour IE5, et telle autre pour tous les autres - ce sont les Box Model Hacks.
C'est Tantek Çelik, un ingénieur Microsoft, père du moteur Tasman (sur lequel tourne IE) et de nombreux travaux pour le W3C (notamment sur les spécification CSS), qui a développé le hack de référence : pour contourner le problème, il exploite un autre bug de IE5, qui ne parvient pas à lire entièrement le code suivant :

div.contenu
  {
  padding: 10px;
  border: 5px;
  border: 5px;
  width: 130px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 100px;
  }

IE5 ne peut lire la dernière ligne, car il bloque sur les deux précédentes : il utilise donc la valeur de largeur 130px, tandis que les navigateurs respectant la norme CSS lisant ce code jusqu'au bout, et appliquent la valeur de 100px à la largeur totale...

Autre méthode, assez proche car utilisant un bug de lecture d'IE5:

div
  {
  padding: 10px;
  border: 5px;
  border: 5px;
  \width: 130px;
  w\idth: 100px;
  }

D'autres existent, chacun pouvant répondre à un besoin différent...


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius