Bien comprendre le modèle de boîte (box model) est indispensable pour construire une mise en page en CSS, qui est constituée de « boîtes » imbriquées les unes dans les autres, comme des poupées gigognes.
Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes (box). Chacune de ces boîtes est constituée d’un contenu, d’un espacement intérieur, d’une bordure, et d’une marge externe.
Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de chacun de ses constituants :
| Propriété CSS | Ce qui est concerné : |
|---|---|
width et height |
largeur et hauteur du contenu (texte, image, etc.) |
padding |
espacement intérieur, entre le contenu et la bordure |
border |
bordure (ou encadrement) |
margin |
marge externe, espace (transparent) entourant le tout |
Selon le modèle standard du W3C, la largeur apparente à l’écran correspond à width+padding+border. De même, la hauteur occupée à l’écran correspond à height+padding+border.
Exemple illustré ci-dessus : div { width: 250px; padding: 20px; border: 5px; margin: 25px; }. Cette boîte ayant un contenu de 250 pixels de large, des padding latéraux de 20 pixels chacun et des bordures latérales 5 pixels chacune, occupera à l’écran une largeur apparente de 5 + 20 +250 + 20 + 5= 300 pixels.
Tout se gâte avec IE !
Il existe un autre modèle de boîte, celui de Microsoft, où la largeur apparente à l’écran est égale à la seule valeur de width, son navigateur (Internet Exploreur pour Mac ou PC) réduisant la zone de contenu selon les valeurs des padding et border. Ainsi le code de l’exemple ci-dessus affichera une boîte de 250 pixels de large dans IE, au lieu des 300 pixels attendus. La différence n’est pas négligeable !
Pour ne pas se poser de questions, certain-e-s modifient leur façon de coder en CSS, plaçant les propriétés border et padding sur des boîtes différentes de celles où sont définies largeur et hauteur, quite à surcharger leur code de boîtes par ailleurs inutiles.
Mieux : on forcera le choix du modèle à appliquer, en spécifiant un DOCTYPE dans le head de chaque page. Pour en savoir plus, lire : « Gérer les modèles de boîtes CSS standard et Microsoft », par Laurent Denis, OpenWeb, mars 2003.
Notons que cela ne change rien pour IE5/Win qui ne connaît que le modèle Microsoft, ni pour IE6/Win dans certains cas. On utilisera alors le « Box Model Hack », hack de référence developpé par Tantek Çelik, ici traduit en français (par Christophe Ducamp) : « Bidouillage de Boîtes ».
Vos commentaires
1. Le 17 juillet 2009 à 07:36, par Solan
En réponse à : Modèle des boîtes CSS
Pour un non spécialiste, cette démolition systématique du navigateur IE a quelque chose d’excédant, je me permets de le dire ici en espérant que les professionnels se modèrent un peu pour rester crédibles ! Après tout, c’est pour le public que vous travaillez et vous devriez comprendre qu’il n’a pas les mêmes critères qu’un designer ou un webmestre pour juger le navigateur ! Ces limitations d’IE, ce sont les concepteurs qui s’en apercoivent parce qu’ils ne peuvent pas faire ce qu’ils veulent ! Qu’est-ce que ça nous fait à nous ? Va-t-on sur Internet pour admirer seulement des pages ultra sophistiquées ou des couleurs transparentes ? Bien sûr que non ! IE a une supériorité sur tous les autres du fait qu’il se met à la place de l’internaute de base et cherche à lui faciliter les choses. Ce n’est pas un navigateur « intellectuel ». Des navigateurs comme Opera et Safari sont beaucoup trop sophistiqués et compliqués à comprendre. Quant à Firefox, il reste tourné vers des gens qui ont des notions avancés d’informatique car il n’est pas facile à paramétrer. Je vous donne simplement un point de vue d’utilisateur ordinaire.
2. Le 27 novembre 2009 à 20:17, par grrrr
En réponse à : Modèle des boîtes CSS
Et le respect des standards ? Les standards ne sont pas faits pour les chiens.
3. Le 1er septembre 2010 à 20:49, par Cedric
En réponse à : Modèle des boîtes CSS
Internet Exploreur dit IE, est un navigateur certes très répandu chez le grand publique, tout fois il souffre d’une ergonomie très mal penser (menu non explicite …, notamment dans IE5,IE6) comparais a ces concurrents tels que Firefox, Safarie,Opéra,Chrome …
Après une très long période sans mise à jours (IE5 et IE6 ne sont plus mis à jours depuis plusieurs années et ne respecte pas les normes de organisme qui s’occupe de la standardisation de l’internet, le W3C).
Avec arrivée de IE7 et IE8, Microsoft à fait un grand pas vers les standards du WEB (W3C) sans il parvenir encore totalement (mais effort est louable), tout fois avec ces nouvelles version d’ IE (7 et 8) des problèmes supplémentaires sont apparus, LES FAILLES DE SÉCURITÉ ÉNORME, pouvant mettre internaute en danger ( accès facilité au script dangereux, virus, cheval de trois …).
Cette manque de réactivité au niveau de mise à jours des failles de sécurité rends IE, nettement plus vulnérable que les autres navigateur telle que Firefox, Safari, Opéra, Chrome …
Répondre à cet article
Suivre les commentaires :
| 