Visualiseur du modèle de boîte CSS, gratuit

Comment utiliser

1. Saisissez les valeurs du modèle de boîte : définissez marge, bordure, padding et dimensions du contenu dans les champs ou les curseurs interactifs.
2. Explorez la visualisation : le diagramme classique de boîtes imbriquées se met à jour en temps réel — marge (orange), bordure (jaune), padding (vert) et contenu (bleu), tous clairement étiquetés.
3. Copiez le CSS : cliquez sur Copier le CSS pour obtenir les propriétés complètes du modèle de boîte de l'élément configuré.

Pourquoi utiliser le visualiseur du modèle de boîte CSS ?

Le modèle de boîte CSS est l'un des concepts les plus fondamentaux de la mise en page web — et l'une des sources de bugs les plus courantes, surtout en mélangeant les valeurs de box-sizing, la fusion de marges et le dimensionnement des bordures. Ce visualiseur interactif rend le modèle de boîte concret et tangible : vous ajustez les valeurs et voyez immédiatement comment marge, bordure et padding s'empilent autour du contenu. Essentiel pour apprendre, déboguer et enseigner le CSS.

Fonctionnalités

• Diagramme interactif : la vue classique du modèle de boîte imbriqué avec des couches codées par couleur (marge, bordure, padding, contenu).
• Bascule box-sizing : passez entre content-box et border-box pour voir comment chaque mode affecte les dimensions totales.
• Côtés individuels : définissez les valeurs haut/droite/bas/gauche indépendamment pour marge, padding et bordure.
• Calcul de la taille totale : affiche la largeur et la hauteur totales calculées de l'élément.
• Sortie CSS : génère du CSS prêt à l'emploi pour le modèle de boîte configuré.

Questions fréquentes

Quelle est la différence entre content-box et border-box ?

Avec content-box (par défaut), width et height s'appliquent uniquement à la zone de contenu — padding et bordure s'ajoutent à la taille totale de l'élément. Avec border-box, width et height incluent padding et bordure, ce qui rend les tailles plus prévisibles. La plupart des CSS resets modernes appliquent box-sizing: border-box à tous les éléments.

Qu'est-ce que la fusion de marges ?

Quand deux marges verticales se touchent (entre éléments block adjacents ou entre parent et premier/dernier enfant), elles fusionnent en une seule marge égale à la plus grande des deux valeurs. Cela ne se produit pas avec les enfants flex ou grid, ni avec des éléments ayant du padding ou des bordures.

Comment retirer l'espace supplémentaire sous les éléments inline ?

Les éléments inline (comme ) ont un petit espace en dessous d'eux causé par l'alignement de la ligne de base du line-height. Corrigez-le en mettant display: block sur l'élément, ou vertical-align: bottom, ou font-size: 0 sur le parent.