Visualiseur du modèle en boîte.

Chaque élément HTML est rendu sous forme de boîte rectangulaire. Le modèle de boîte CSS décrit comment les couches de contenu, de padding, de border et de margin de l'élément s'empilent pour déterminer l'espace total occupé par l'élément sur la page. Comprendre ce modèle est essentiel pour maîtriser la mise en page et l'espacement.

Ajustez les valeurs numériques pour chaque couche — margin, border, padding et dimensions du contenu. Cliquez sur une section de couche pour la mettre en surbrillance dans le diagramme. L'aperçu visuel se met à jour instantanément et le code CSS correspondant est généré en bas pour être copié.

Le margin est l'espace transparent à l'extérieur du border qui sépare l'élément de ses voisins. Le border est la limite visible autour du padding. Le padding est l'espace entre le border et le contenu réel. Le content est la zone la plus interne où apparaissent le texte et les éléments enfants.

Avec content-box (par défaut), la largeur et la hauteur définies s'appliquent uniquement à la zone de contenu — le padding et le border sont ajoutés au-dessus. Avec border-box, la largeur et la hauteur incluent le padding et le border, ce qui rend les calculs de mise en page plus intuitifs. La plupart des projets modernes utilisent border-box globalement.

Utilisez ce visualiseur pour expérimenter avec différentes valeurs et voir comment chaque couche contribue à la taille totale de l'élément. Lorsqu'un élément occupe plus d'espace que prévu, vérifiez si les valeurs de padding ou de border le poussent au-delà de la largeur souhaitée. Le CSS généré peut être collé directement dans votre projet.