Visualisez le Modèle de Boite CSS

Name: Visualisez le Modèle de Boite CSS
Author: Kitmul

Visualisez interactivement le modèle de boite CSS avec édition en direct du padding, border, margin et contenu.

Visualisez interactivement le modèle de boite CSS avec édition en direct du padding, border, margin et des dimensions de contenu. Basculez entre content-box et border-box pour voir comment les dimensions changent. Utilisez des presets pour cartes, boutons et sections hero. Voyez les dimensions calculées à chaque couche, previsualiser l'élément reel et copiez le CSS généré. Tout fonctionne dans votre navigateur sans appels serveur.

Presets:

box-sizing:

Contenu Padding Bordure Marge

Contenu (content-box)

Largeur: Hauteur:

Padding

Haut: Droite: Bas: Gauche:

Bordure

Haut: Droite: Bas: Gauche:

Marge

Haut: Droite: Bas: Gauche:

Dimensions Calculees

Contenu: 200 x 150

Avec Padding: 240 x 190

Avec Bordure: 244 x 194

Total: 264 x 214

Aperçu en Direct

200x150

CSS

box-sizing: content-box;
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
margin: 10px;

Vos données restent dans votre navigateur

Cet outil vous a-t-il été utile ?

Notez cet outil

Tutoriel

Comment Utiliser

Ajustez les Valeurs

Editez padding, border, margin et dimensions de contenu avec les champs numeriques. Le diagramme SVG se met à jour en temps reel.

Basculez le Box Sizing

Alternez entre content-box et border-box pour voir comment largeur et hauteur sont interpretees differemment par chaque modèle.

Copiez et Utilisez

Vérifiez les dimensions calculées à chaque couche, consultez l'aperçu en direct et copiez le CSS généré directement dans votre projet.

Guide

Guide Complet du Modèle de Boite CSS

Les Quatre Couches

Chaque élément à un contenu (le texte ou éléments enfants), du padding (espace transparent à l'interieur du border), un border (un bord visible) et du margin (espace transparent à l'exterieur du border). Comprendre ces couches est essentiel pour le layout CSS.

Content-Box vs Border-Box

Le modèle content-box par défaut signifie que largeur et hauteur s'appliquent uniquement à la zone de contenu. Border-box inclut padding et border dans la largeur et hauteur declarees, ce qui est généralement plus intuitif pour le travail de layout.

Fusion des Marges

Les marges verticales adjacentes d'éléments de bloc fusionnent: seule la plus grande marge s'applique. Ce comportement surprend beaucoup de développeurs. Padding, border, éléments inline et conteneurs flexbox empêchent la fusion.

Box Model en Flexbox et Grid

Dans les layouts flexbox et grid, le modèle de boite s'applique toujours à chaque item. Le conteneur flex ou grid contrôle le placement des items tandis que le modèle de boite de chaque item détermine ses dimensions internes et espacement.

Sources

Examples

Exemples Resolus

Exemple: Largeur Totale en Content-Box

Donne: width 200px, padding 20px chaque côté, border 2px chaque côté, margin 10px chaque côté, box-sizing content-box.

Étape 1: Largeur du contenu = 200px (largeur declaree).

Étape 2: Ajouter padding: 200 + 20 + 20 = 240px.

Étape 3: Ajouter border: 240 + 2 + 2 = 244px.

Étape 4: Ajouter margin: 244 + 10 + 10 = 264px espace total.

Résultat: L'élément se rend a 244px de large et occupe 264px d'espace horizontal total.

Exemple: Comparaison avec Border-Box

Mêmes valeurs mais avec box-sizing border-box.

Étape 1: La largeur declaree de 200px inclut maintenant padding et border.

Étape 2: Largeur du contenu = 200 - 20 - 20 - 2 - 2 = 156px.

Étape 3: La largeur rendue reste a 200px (padding et border sont à l'interieur).

Étape 4: Ajouter margin: 200 + 10 + 10 = 220px espace total.

Résultat: Border-box fait que l'élément mesure 200px indépendamment du padding et border. L'espace total est 220px.

Cas d'utilisation

Cas d'Utilisation

Apprendre les Bases du Box Model

“Nouveau en CSS? Editez chaque couche et regardez le diagramme changer pour construire une compréhension intuitive de comment contenu, padding, border et margin interagissent pour former les dimensions de l'élément.”

Debugger des Problèmes de Layout

“Entrez vos valeurs CSS actuelles dans l'outil pour voir l'espace total qu'occupe un élément. Basculez box-sizing pour comprendre pourquoi votre élément est plus large que prevu.”

Prototyper l'Espacement de Composants

“Utilisez des presets comme Carte ou Bouton comme point de depart, puis ajustez les valeurs de padding et margin jusqu'a obtenir l'espacement desire. Copiez le CSS directement dans votre feuille de styles.”

Questions Fréquemment Posees

?Qu'est-ce que le modèle de boite CSS?

Chaque élément HTML est une boite rectangulaire avec quatre couches: contenu, padding, border et margin. Le modèle de boite définit comment ces couches se combinent pour déterminer la taille totale de l'élément.

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

En content-box, largeur et hauteur définissent uniquement la zone de contenu. En border-box, largeur et hauteur incluent padding et border, simplifiant les calculs de layout.

?Quel box-sizing devrais-je utiliser?

La plupart des resets CSS modernes utilisent border-box pour tous les éléments. Cela facilité les layouts responsifs car les pourcentages de largeur incluent padding et border.

?Le margin affecte-t-il la taille de l'élément?

Non. Le margin créé de l'espace en dehors du border et ne change pas la taille rendue de l'élément. Cependant, il affecte l'espace total que l'élément occupe dans le layout.

?Qu'est-ce que la fusion des marges?

Quand deux marges verticales se rencontrent, elles fusionnent en une seule marge égale à la plus grande des deux. Cela n'arrive que verticalement et uniquement avec les éléments de bloc.

?Mes données sont-elles privées?

Completement. Tous les calculs et le rendu se font dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

?Cet outil est-il gratuit?

Oui. Entièrement gratuit sans inscription, sans limites et sans publicités.

?Puis-je utiliser des marges negatives?

Le visualiseur utilisé des valeurs non negatives pour la clarté. En CSS reel, les marges negatives sont valides et rapprochent ou superposent les éléments.

Aidez-nous à améliorer

Aimez-vous cet outil ?

Chaque outil Kitmul est construit à partir de vraies demandes d'utilisateurs. Votre note et vos suggestions nous aident à corriger des bugs, ajouter des fonctionnalités manquantes et créer les outils dont vous avez vraiment besoin.

Outils associés

Visualisez les Algorithmes de Pathfinding

Visualisez les algorithmes A*, Dijkstra, BFS et DFS étape par étape sur une grille interactive.

Essayer l'outil

Visualiseur d'arbre de syntaxe abstraité (AST)

Visualisez la structure de votre code JavaScript avec un arbre AST détaillé.

Essayer l'outil

Visualiseur de Textes Big Data

Visualisez et recherchez efficacement dans des fichiers texte extrêmement volumineux grâce au buffering et au défilement infini.

Essayer l'outil

Lectures Recommandées

Livres Recommandés sur CSS et le Design Web

Boostez vos Compétences

Produits Recommandés pour le Développement Web

Souris Sans Fil MX Master 3S avec Defilement Ultra-Rapide

Visualisez le Modèle de Boite CSS

Contenu (content-box)

Padding

Bordure

Marge

Dimensions Calculees

Aperçu en Direct

CSS

Comment Utiliser

Ajustez les Valeurs

Basculez le Box Sizing

Copiez et Utilisez

Guide Complet du Modèle de Boite CSS

Les Quatre Couches

Content-Box vs Border-Box

Fusion des Marges

Box Model en Flexbox et Grid

Exemples Resolus

Exemple: Largeur Totale en Content-Box

Exemple: Comparaison avec Border-Box

Cas d'Utilisation

Apprendre les Bases du Box Model

Debugger des Problèmes de Layout

Prototyper l'Espacement de Composants

Questions Fréquemment Posees

?Qu'est-ce que le modèle de boite CSS?

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

?Quel box-sizing devrais-je utiliser?

?Le margin affecte-t-il la taille de l'élément?

?Qu'est-ce que la fusion des marges?

?Mes données sont-elles privées?

?Cet outil est-il gratuit?

?Puis-je utiliser des marges negatives?

Aimez-vous cet outil ?

Outils associés

Visualisez les Algorithmes de Pathfinding

Visualiseur d'arbre de syntaxe abstraité (AST)

Visualiseur de Textes Big Data

Livres Recommandés sur CSS et le Design Web

CSS: The Definitive Guide

CSS in Depth

CSS: The Definitive Guide (4th Edition)

Produits Recommandés pour le Développement Web

Souris Sans Fil MX Master 3S avec Defilement Ultra-Rapide

Clavier Mecanique Sans Fil K2 Pro pour Développeurs, Layout 75%

Moniteur Portable USB-C 15.6 pouces FHD 1080P pour Double Écran

Recevez des Conseils Productivité et les Nouveaux Outils en Premier

Contenu (content-box)

Padding

Bordure

Marge

Dimensions Calculees

Aperçu en Direct

CSS