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 <img>) 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.

Ce que le modèle de boîte CSS définit vraiment

Le modèle de boîte CSS est la représentation rectangulaire de chaque élément sur une page web. Chaque élément possède quatre boîtes concentriques : la boîte de contenu (où vivent le texte, les images, les éléments enfants), la boîte de padding (espace entre le contenu et la bordure, à l’intérieur de la limite visible), la boîte de bordure (le contour visible dessiné autour du padding) et la boîte de marge (espace transparent à l’extérieur de la bordure qui sépare cet élément de ses voisins). La taille visible totale d’un élément est contenu + padding + bordure ; la marge est invisible mais repousse les autres éléments.

Le concept critique est box-sizing. Par défaut (box-sizing: content-box, valeur de la spécification CSS 1), les propriétés width et height s’appliquent uniquement à la boîte de contenu. Si vous définissez width: 200px; padding: 20px; border: 2px solid, la largeur rendue totale est 200 + 40 + 4 = 244 pixels. C’est contre-intuitif : un élément « large de 200px » prend en réalité 244 pixels d’espace horizontal. L’alternative box-sizing: border-box (ajoutée dans CSS 3) inverse ceci : la propriété width est la taille visible totale incluant padding et bordure, donc la zone de contenu rétrécit pour s’adapter. border-box est ce à quoi la plupart des développeurs s’attendent ; c’est devenu le standard de facto via le reset CSS « * { box-sizing: border-box } » de Paul Irish en 2012.

Comprendre le modèle de boîte est important parce que les bogues de mise en page tracent presque toujours leur origine à une confusion sur quelle valeur s’applique à quelle boîte. « Pourquoi mon élément est-il plus large que ce que j’ai défini ? » est une surprise de content-box. « Pourquoi ma marge ne pousse-t-elle pas les frères vers le bas ? » est généralement un effondrement de marges. « Pourquoi padding-top: 50% se comporte-t-il bizarrement ? » parce que le padding en pourcentage est calculé par rapport à la largeur du parent, pas la hauteur. Chaque développeur CSS rencontre ces confusions ; ce visualiseur les rend concrètes en vous laissant ajuster les valeurs et voir la géométrie de boîte résultante en temps réel.

Comment cet outil fonctionne en coulisses

Le diagramme interactif est une série de divs colorés imbriqués correspondant à chaque boîte (marge en orange, bordure en jaune, padding en vert, contenu en bleu). Lorsque vous modifiez les valeurs d’entrée, JavaScript met à jour les attributs style inline des divs du diagramme afin qu’ils reflètent les valeurs numériquement et visuellement. Les proportions sont mises à l’échelle pour s’adapter à la zone de prévisualisation ; des valeurs en pixels absolus pousseraient le diagramme hors écran pour les entrées typiques.

Le calcul de la taille totale dépend du mode box-sizing. Pour content-box : largeur totale = largeur du contenu + padding-left + padding-right + border-left + border-right. Pour border-box : largeur totale = la valeur de width (padding et bordure sont soustraits de la zone de contenu). L’outil calcule les deux modes simultanément lorsque vous basculez box-sizing, ainsi vous pouvez comparer directement.

La sortie CSS générée utilise vos entrées comme valeurs de propriété : box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Copiez ceci directement dans votre feuille de style et appliquez la classe correspondante. Rien ne quitte votre navigateur ; tout s’exécute localement en JavaScript. Pas d’analytique, pas de backend, pas de compte. Rafraîchissez et l’état est parti.

Brève histoire du modèle de boîte CSS

• CSS 1 spécifie content-box, 1996.La recommandation CSS 1 (décembre 1996) définit le modèle de boîte W3C : la largeur s’applique uniquement au contenu, padding et bordure s’ajoutent à la taille totale. Cela devient la norme, mais Internet Explorer 4 et 5 implémentent un modèle alternatif où la largeur inclut padding et bordure (similaire au border-box d’aujourd’hui).
• IE quirks mode et la Guerre du Modèle de Boîte, 1997 à 2001.IE 4 (1997) et IE 5 sont livrés avec leur modèle de boîte non standard ; IE 6 (2001) introduit le « standards mode » déclenché par une déclaration doctype qui passe au modèle de boîte W3C. L’écart crée des années de bogues de mise en page multi-navigateurs et la connaissance « quirks mode vs standards mode » que chaque développeur web doit apprendre jusqu’en 2010.
• Reset CSS et feuille de style classique d’Eric Meyer, 2007.Eric Meyer publie le reset CSS canonique (mai 2007) qui met à zéro les marges, paddings et autres valeurs par défaut sur tous les éléments. Devient une pratique standard pour un style multi-navigateurs prévisible. Le reset ne traite pas directement box-sizing mais normalise le chaos autour des valeurs par défaut héritées.
• Propriété box-sizing en CSS3, 2009 à 2014.CSS3 introduit box-sizing: border-box comme alternative opt-in à content-box. WebKit et Firefox le supportent à partir de 2009 ; IE 8 (2009) devient la première version IE à le supporter nativement. Permet aux développeurs de choisir le modèle de boîte de style IE ou W3C par élément.
• Universal border-box de Paul Irish, 2012.Paul Irish (Google) publie l’article de blog « * { box-sizing: border-box } FTW » (février 2012), arguant que universal border-box est un défaut sensé pour les nouveaux projets. Le motif se répand rapidement à travers les défauts de framework (Bootstrap, Tailwind, Material UI). En 2015, la plupart des resets CSS et des frameworks sont livrés avec border-box comme défaut.
• Propriétés logiques, 2018 à 2024.CSS Logical Properties and Values Module Level 1 (CR juin 2018) introduit des alternatives agnostiques à la direction : margin-inline-start (début de direction du texte) au lieu de margin-left, padding-block (haut + bas) au lieu de padding-top + padding-bottom. Critique pour les langues de droite à gauche (arabe, hébreu) et l’internationalisation moderne. Le support des navigateurs atteint 95%+ d’ici 2022.

Flux du monde réel

• Déboguer les bogues de mise en page.Quand un élément s’affiche à une taille inattendue, ouvrir le panneau de style calculé des DevTools du navigateur révèle les quatre valeurs de boîte numériquement. Ce visualiseur est utile pour faire le calcul à l’avance : « si je définis width 200, padding 16, border 2, quelle est la taille totale dans chaque mode box-sizing ? » Particulièrement utile pour enseigner aux juniors pourquoi width: 100% avec padding déborde du parent en mode content-box.
• Enseigner CSS aux débutants.Le modèle de boîte est le premier concept abstrait que les développeurs web débutants doivent intérioriser. Une visualisation interactive codée par couleur bat la lecture des specs. Les instructeurs de bootcamp et les apprenants en autodidacte utilisent les visualiseurs de modèle de boîte comme moyen « tactile » de voir comment marge, bordure et padding s’empilent. Cet outil existe en partie pour cet objectif.
• Dimensionnement des composants du système de design.Les systèmes de design spécifient les hauteurs de bouton, les rythmes de padding et les échelles de marge en tokens (par ex. spacing-1, spacing-2, spacing-3). Lors de l’implémentation en code, le modèle de boîte détermine si le bouton rendu final est de la taille prévue. Visualisez le calcul d’abord pour attraper les erreurs off-by-padding avant qu’elles n’arrivent au handoff Figma-vers-React.
• Design responsive et marges en pourcentage.Les valeurs en pourcentage pour padding, marge, width et height sont calculées par rapport à la largeur de contenu du parent (pas la hauteur, étonnamment), ce qui peut causer un comportement étrange sur mobile. Le visualiseur de modèle de boîte vous aide à penser à ce que signifient les pourcentages avant d’écrire le CSS. Par exemple, padding-top: 50% sur un div crée un conteneur de ratio carré (utilisé pour les placeholders d’image avant la propriété aspect-ratio).
• Dimensionnement des cibles tactiles d’accessibilité.WCAG 2.1 SC 2.5.5 (niveau AAA) recommande des cibles tactiles minimales de 44x44 pixels CSS. Le modèle de boîte détermine si la combinaison contenu + padding d’un bouton atteint ce seuil. Utilisez le visualiseur pour confirmer que padding: 12px 16px autour d’un texte de 18px line-height donne un bouton qui dépasse 44px dans les deux dimensions, satisfaisant la directive.
• Alignement CSS Grid et Flexbox.Les outils de mise en page modernes (CSS Grid, Flexbox) traitent chaque élément grid/flex comme une boîte soumise au modèle de boîte. Comprendre comment padding et marge interagissent avec gap, justify-content et align-items nécessite la fluidité du modèle de boîte. L’effondrement de marges est supprimé à l’intérieur des conteneurs flex/grid, ce qui surprend souvent les développeurs CSS habitués à la mise en page de bloc traditionnelle.

Pièges courants et ce qu’ils signifient

• Surprises d’effondrement de marges.Quand deux éléments de bloc ont des marges qui se touchent verticalement, elles s’effondrent en la plus grande des deux, pas la somme. Une marge inférieure de 20px rencontrant une marge supérieure de 30px produit 30px d’espace, pas 50px. Les marges parent et premier/dernier enfant s’effondrent aussi si le parent n’a pas de padding, bordure ou overflow défini. À l’intérieur des conteneurs flex ou grid, les marges ne s’effondrent pas. Cette règle a piégé chaque développeur CSS à un moment donné.
• Mathématiques de largeur content-box vs border-box.Définir width: 100%; padding: 20px sur un élément content-box le rend 40px plus large que le parent (débordement). Avec border-box, la même déclaration se place correctement à l’intérieur du parent. C’est le piège de modèle de boîte le plus courant ; la règle universelle * { box-sizing: border-box } en corrige la plupart de manière préventive. Sachez toujours dans quel mode vous travaillez.
• Le padding/margin en pourcentage est relatif à la largeur.padding-top: 50% et margin-bottom: 50% calculent le pourcentage basé sur la largeur de contenu du parent, pas la hauteur. C’est non évident et est la base du classique hack « conteneur de ratio d’aspect » (un div avec padding-top: 56.25% crée une boîte 16:9). Maintenant CSS a la propriété aspect-ratio, mais le code hérité et Tailwind moderne s’appuient tous deux sur l’astuce du percent-padding.
• Écart de ligne de base des éléments inline.Un <img> à l’intérieur d’un div conteneur a un mystérieux écart de 4 à 6 pixels en dessous. C’est parce que les éléments inline s’alignent à la ligne de base du texte, laissant de la place pour les descendants. Corrigez avec img { display: block }, img { vertical-align: bottom }, ou en définissant font-size: 0 sur le parent. C’est l’un des plus anciens bogues du modèle de boîte en CSS, datant de 1996.
• Marges négatives pour les astuces de mise en page.Les marges acceptent des valeurs négatives, ce qui tire les éléments les uns vers les autres et est occasionnellement utile (par ex. étendre un conteneur « au-delà » du padding de son parent). Cependant, les marges négatives sont une source fréquente de bogues de superposition confus. Utilisez-les délibérément, commentez votre code et préférez le positionnement CSS Grid/Flexbox quand c’est possible. Le padding négatif est CSS invalide et ignoré par les navigateurs.
• Padding + bordure + contenu > conteneur.Quand la somme contenu + padding + bordure dépasse la largeur disponible du parent, l’élément déborde. Solutions courantes : box-sizing: border-box, réduire la valeur width, utiliser overflow: hidden sur le parent (clipper le débordement), ou min-width: 0 sur les enfants flex pour annuler le comportement implicite min-width: auto. Beaucoup de bogues « la mise en page se casse sur mobile » sont des débordements causés par les maths du modèle de boîte.

Confidentialité : tout s’exécute dans votre navigateur

Les outils d’apprentissage et de visualisation CSS viennent en deux saveurs : pages HTML simples exécutant du JavaScript côté client (privées, rapides, pas de setup) et éditeurs cloud avec projets sauvegardés (collaboratifs mais avec compromis de confidentialité). Cet outil est du premier type. Vos valeurs entrées, votre état de bascule box-sizing, votre CSS généré : tout reste dans votre session navigateur. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord.

Les enjeux de confidentialité sont faibles ici parce que les valeurs du modèle de boîte contiennent rarement des informations sensibles. Néanmoins, l’absence d’analytique compte : vous pouvez expérimenter librement sans que votre processus d’essai-erreur soit enregistré. Particulièrement utile dans des contextes de classe ou de formation d’entreprise où faire enregistrer les étudiants ou stagiaires sur des plateformes tierces est un point de friction. C’est une page statique unique sans backend, utilisable dans n’importe quel navigateur, y compris les machines d’entreprise verrouillées.

Quand un autre outil est le bon choix

• DevTools du navigateur pour le débogage en direct.Les DevTools de Chrome et Firefox incluent un panneau de modèle de boîte qui affiche les quatre valeurs de boîte pour tout élément sélectionné sur une page en direct. Modifiez les valeurs inline et voyez la page se mettre à jour. Pour déboguer les mises en page de page réelles (pas l’exploration abstraite du modèle de boîte), les DevTools battent cet outil parce qu’ils fonctionnent sur votre vrai code avec de vraies cascades CSS et héritage.
• Figma pour la sortie de spécifications de design.Les designers utilisent Figma, Sketch ou Adobe XD pour disposer des composants avec des mesures exactes en pixels. Le panneau d’inspection de l’outil de design exporte les valeurs de marge et padding que les développeurs traduisent en CSS. Pour le handoff design-vers-développement, l’outil de design est la source de vérité ; ce visualiseur est pour comprendre le comportement CSS, pas pour générer des spécifications de composants de production.
• CSS-in-JS pour l’encapsulation de composants.Lors de la construction de bibliothèques de composants avec styled-components, Emotion, vanilla-extract ou des solutions CSS-in-JS similaires, le modèle de boîte est encapsulé dans chaque composant. Marges sur le wrapper externe, padding à l’intérieur. Ce visualiseur aide à raisonner sur la géométrie d’un composant individuel ; la bibliothèque gère la coordination de mise en page inter-composants.
• Outils CSS Grid/Flexbox pour la mise en page.Pour les mises en page multi-éléments (grilles de page, galeries de cartes, barres de navigation), CSS Grid et Flexbox sont les bonnes abstractions, pas le modèle de boîte seul. Nos outils Flexbox Generator et CSS Grid Generator aident avec ces mises en page directement. Le modèle de boîte est nécessaire mais pas suffisant pour la mise en page moderne ; utilisez le bon outil pour la bonne échelle.

Autres questions fréquentes

Devrais-je utiliser universel * { box-sizing: border-box } ?

Pour la plupart des projets, oui. La proposition de Paul Irish de 2012 est maintenant le défaut de l’industrie et s’aligne avec la façon dont la plupart des développeurs s’attendent à ce que width et height fonctionnent. Les frameworks comme Bootstrap, Tailwind, Bulma et Material UI sont livrés avec border-box comme défaut. Les projets modernes commençant en 2026 devraient définir *, *::before, *::after { box-sizing: border-box; } en haut de leur reset, et rarement avoir besoin de penser au box-sizing à nouveau. Des surcharges spécifiques vers content-box sont possibles pour des éléments individuels où border-box ferait foirer les choses.

Pourquoi ma marge pousse-t-elle le parent vers le bas au lieu de pousser les frères ?

C’est l’effondrement de marges. Quand la marge supérieure d’un enfant rencontre le bord supérieur du parent sans padding/bordure entre eux, la marge de l’enfant « s’échappe » et s’applique au parent à la place. Corrections : ajouter padding-top: 1px au parent (n’importe quelle valeur fonctionne), ajouter border: 1px solid transparent, définir le parent comme conteneur flex ou grid (l’effondrement est supprimé dans ces modes), ou utiliser display: flow-root sur le parent (une règle moderne explicite « établir un nouveau contexte de formatage de bloc »). Tous ces moyens empêchent la marge de s’effondrer à travers.

Quelle est la différence entre margin: auto et margin: 0 ?

margin: 0 signifie aucune marge ; l’élément se trouve contre ses voisins. margin: auto signifie que le navigateur calcule la marge pour distribuer l’espace horizontal restant, typiquement utilisé pour centrer un élément de bloc : margin-left: auto; margin-right: auto; divise également l’espace restant. margin: auto auto auto auto (ou raccourci margin: auto) centre à la fois horizontalement et verticalement à l’intérieur d’un conteneur flex. En dehors de flex/grid, seules les marges auto horizontales fonctionnent.

En quoi outline diffère-t-il de border ?

Outline dessine autour d’un élément mais est en dehors du modèle de boîte : il n’ajoute pas à la taille de l’élément et ne repousse pas les voisins. Border fait partie du modèle de boîte et ajoute à la taille rendue. Outline est typiquement utilisé pour les anneaux de focus (contours :focus-visible) où vous voulez un indicateur visible sans décaler la mise en page. Border est utilisé quand la ligne devrait faire partie de la structure de l’élément. Ne supprimez pas outline: none sans fournir un indicateur de focus alternatif ; faire cela casse l’accessibilité clavier.

Pourquoi utiliser des propriétés logiques comme margin-inline-start ?

Les propriétés logiques (margin-block-start, padding-inline, etc.) s’adaptent à la direction d’écriture du document. En anglais (de gauche à droite), margin-inline-start est la même chose que margin-left. En arabe ou en hébreu (de droite à gauche), elle devient margin-right automatiquement. Pour les sites qui supportent plusieurs langues, les propriétés logiques rendent l’internationalisation CSS automatique. Pour les sites uniquement en anglais, elles sont équivalentes en effet mais signalent l’intention plus clairement : « cette marge est au début du flux de texte » plutôt que « cette marge est du côté gauche ».

Comment créer une boîte à ratio d’aspect fixe ?

La manière moderne est la propriété CSS aspect-ratio : aspect-ratio: 16/9 sur un div rend sa hauteur automatiquement 9/16 de sa largeur. Supporté dans tous les navigateurs modernes (2021+). La technique héritée utilise padding-top en pourcentage : un div avec padding-top: 56.25% crée un ratio 16:9 (9/16 = 56,25%). L’astuce padding-top fonctionne toujours mais la syntaxe de propriété est plus propre. Utilisez aspect-ratio pour le nouveau code ; le hack hérité reste dans Tailwind et autres outils qui ont besoin d’un large support de navigateur.