Visualiseur d'espacement/remplissage
Visualisez comment les dimensions du remplissage, de la marge, de la bordure et de la boîte interagissent à l'aide d'un diagramme de modèle de boîte CSS à code couleur et d'un aperçu en direct. Ajustez les valeurs en temps réel et exportez instantanément les classes utilitaires CSS ou Tailwind abrégées - s'exécute entièrement dans votre navigateur sans aucune inscription requise.
Adjust padding, margin, border, and box dimensions using the controls below. The diagram and live preview update instantly - then copy the generated CSS or Tailwind classes.
Applied to all spacing values
Box Dimensions
Padding
Margin
Box Model Diagram
Live Preview
Pourquoi utiliser notre visualiseur d'espacement/remplissage ?
- Aperçu instantané en direct : notre visualiseur d'espacement/remplissage met à jour le diagramme du modèle de boîte et l'aperçu en direct en temps réel à mesure que vous ajustez les valeurs - aucun clic de bouton n'est nécessaire. Découvrez exactement comment le remplissage, la marge et la bordure interagissent avant d'écrire une seule ligne de CSS.
- Sécurisé et privé - Pas de téléchargement : le visualiseur d'espacement/remplissage s'exécute entièrement dans votre navigateur à l'aide de JavaScript côté client. Aucune donnée n'est jamais envoyée à un serveur - vos expériences de mise en page et les CSS générés restent totalement privés sur votre appareil.
- Sortie CSS et Tailwind : générez instantanément des classes utilitaires CSS simples et Tailwind CSS à partir de vos valeurs d'espacement. Le visualiseur d'espacement/remplissage produit des CSS abrégés lorsque cela est possible et mappe les valeurs à l'échelle Tailwind la plus proche - prêtes à être collées dans votre projet.
- 100 % gratuit - Sans limites : utilisez le visualiseur d'espacement/remplissage entièrement gratuitement, sans inscription, sans abonnement et sans limite d'utilisation. Ajustez les valeurs, copiez le CSS et expérimentez les mises en page des modèles de boîtes autant de fois que nécessaire - toujours gratuitement, sans publicité.
Qu'est-ce que le modèle de boîte CSS ?
Le modèle de boîte CSS est le concept de mise en page fondamental qui décrit comment chaque élément HTML est rendu sous la forme d'une boîte rectangulaire avec quatre couches distinctes : contenu, remplissage, bordure et marge. Comprendre comment ces couches interagissent est essentiel pour un travail de mise en page CSS précis. Notre visualiseur d'espacement/remplissage affiche simultanément un diagramme codé par couleur des quatre calques, ce qui permet de voir facilement exactement comment vos valeurs affectent la taille totale rendue et l'espacement de n'importe quel élément. Que vous débogiez des problèmes de mise en page ou construisiez un système de conception, le visualiseur d'espacement/remplissage en ligne vous donne un retour visuel instantané sans écrire de code.
Comment fonctionne notre visualiseur d'espacement/rembourrage
- Définissez vos valeurs : saisissez les valeurs de remplissage, de marge, de bordure et de dimension de boîte à l'aide des commandes. Choisissez votre unité préférée (px, rem, em ou %) et le diagramme se met à jour instantanément.
- Lisez le diagramme et l'aperçu : le diagramme du modèle de boîte à code couleur montre les quatre couches avec des valeurs étiquetées. L'aperçu en direct restitue la boîte réelle avec votre CSS exact appliqué afin que vous puissiez voir le résultat visuel réel.
- Copiez votre CSS ou Tailwind : l'outil génère automatiquement des classes utilitaires CSS et Tailwind abrégées à partir de vos valeurs. Copiez l'une ou l'autre sortie directement dans votre projet - aucune conversion manuelle n'est nécessaire.
Ce que montre le visualiseur
- Marge (orange) : La couche la plus externe – espace entre cet élément et ses voisins. La marge est transparente et n'affecte pas la couleur d'arrière-plan de l'élément.
- Bordure (rouge-orange) : Le bord visible de l'élément. La largeur de la bordure, le style (solide, pointillé, pointillé) et le rayon de la bordure sont tous configurables.
- Padding (vert) : Espace entre la bordure et le contenu. Le remplissage hérite de la couleur d'arrière-plan de l'élément et augmente la zone cliquable.
- Contenu (bleu) : la zone la plus intérieure où le texte et les éléments enfants sont rendus. La largeur et la hauteur contrôlent les dimensions de la zone de contenu.
Confidentialité et sécurité des données
Le visualiseur d'espacement/remplissage traite tous les calculs et le rendu localement dans votre navigateur Web à l'aide de JavaScript. Aucune valeur d'espacement, sortie CSS ou donnée de session n'est transmise à un serveur externe. Cela rend l'outil totalement privé et sûr pour une utilisation dans tout flux de développement ou de conception.
Foire aux questions
Un visualiseur d'espacement/remplissage est un outil qui vous permet d'ajuster les dimensions du remplissage CSS, de la marge, de la bordure et de la boîte et de voir le résultat dans un aperçu en direct et un diagramme de modèle de boîte à code couleur. Notre visualiseur d'espacement/remplissage basé sur un navigateur génère également des classes utilitaires CSS et Tailwind abrégées - aucune inscription requise.
Le remplissage est l'espace entre le contenu d'un élément et sa bordure : il hérite de la couleur d'arrière-plan. La marge est l'espace en dehors de la frontière entre l'élément et ses voisins - elle est toujours transparente. Le visualiseur d'espacement/remplissage affiche les deux dans des couleurs distinctes.
L'outil prend en charge px, rem, em et %. Sélectionnez votre unité préférée dans la liste déroulante Unité et toutes les valeurs d'espacement utiliseront cette unité dans la sortie CSS générée.
Le visualiseur d'espacement/remplissage mappe les valeurs px à l'échelle d'espacement CSS Tailwind la plus proche. Les valeurs non standard sont affichées sous forme de valeurs arbitraires en utilisant la syntaxe entre crochets (par exemple, p-[18px]). La sortie Tailwind fonctionne mieux avec les unités px.
Oui. L'outil génère automatiquement un CSS abrégé lorsque cela est possible - remplissage : 16 px lorsque tous les côtés sont égaux, remplissage : 16 px 24 px lorsque haut/bas et gauche/droite correspondent, et valeurs individuelles uniquement lorsque les quatre côtés diffèrent.
Oui. Chaque côté a son propre champ de saisie. Utilisez « Appliquer le haut à tous » pour définir les quatre côtés sur la même valeur, ou « Effacer tout » pour remettre tous les côtés à zéro.
Oui. Tous les calculs s'exécutent entièrement dans votre navigateur. Aucune valeur d'espacement, sortie CSS ou donnée de session n'est jamais transmise à un serveur.
Oui. L'outil prend en charge les styles de bordure solides, en pointillés, en pointillés et aucun, la largeur de bordure configurable et le rayon de bordure en pixels - le tout reflété dans l'aperçu en direct et le CSS généré.
Oui. Le visualiseur d'espacement/remplissage est 100 % gratuit, sans inscription, abonnement ou paiement requis. Il n'y a pas de fonctionnalités premium ni d'options verrouillées - tout est gratuit pour toujours.