Accueil    CSS    Modèle des boîtes
 



CSS - Modèle des boîtes CSS : Modèle des boîtes

Index des styles


Le modèle des boîtes CSS se base sur le principe que tous les éléments utilisés en HTML sont mis en forme sur la base de zones rectangulaires. Ainsi chaque élément lorsqu'il est rendu dans le navigateur aura les contours suivants :

   - Le contenu de l'élément dont la taille est définie par sa largeur width et sa hauteur height
   - Son espacement intérieur : propriété padding
   - Sa bordure : propriété border
   - Sa marge : propriété margin

Ainsi lorsqu'une mise en page précise est nécessaire il est important de tenir compte et d'appliquer au mieux ce modèle pour obtenir le rendu attendu.
Finalement une particularité d'Internet Explorer fait qu'il tient compte de la bordure et du padding dans la largeur de l'élément, contrairement aux autres navigateurs. Pour corriger ce comportement il est impératif d'ajouter un doctype au document :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Modèle des boïtes