Simulateur visuel du box model CSS

Comment fonctionne le box model CSS ?

Chaque élément CSS est composé du contenu, du padding, de la bordure et de la marge.

À quoi sert cet outil ?

Manipulez margin, border, padding et largeur pour comprendre visuellement le box model CSS. Déplacez les curseurs et observez en direct comment chaque couche modifie l’espace autour d’un élément. Il est conçu pour obtenir, tester ou analyser une structure web directement dans le navigateur, avec un résultat visible qu’il reste possible de relire avant intégration.

Content

Zone du contenu. Formule ou repère : width. Exemple : 220 px.

Padding

Espace intérieur. Formule ou repère : padding. Exemple : 24 px.

Border

Contour autour du padding. Formule ou repère : border. Exemple : 4 px.

Margin

Espace extérieur. Formule ou repère : margin. Exemple : 20 px.

Quelle différence entre margin et padding ?

Margin est extérieur, padding intérieur.

La bordure compte-t-elle dans la taille ?

Cela dépend de box-sizing.

Les changements sont-ils en direct ?

Oui.

Le code est-il affiché ?

Oui.

Bien interpréter le résultat

Lorsque l’outil produit ou analyse du code, une configuration ou une structure technique, vérifiez toujours le résultat dans votre navigateur ou votre projet avant une utilisation en production.

Conseil d’utilisation

Les navigateurs, moteurs ou environnements peuvent interpréter certaines structures différemment : un test dans le contexte final reste donc utile.

Vérification du résultat

Avant de réutiliser la sortie, comparez-la avec les valeurs saisies et les repères affichés par l’outil. Cette vérification simple permet de détecter une erreur de saisie ou un paramètre mal choisi.