Chargement...

Modèle de boîte CSS

Vous connaissez déjà bordures, padding, margin et width. Placez-les maintenant sur une seule carte. Le modèle de boîte CSS dit que chaque élément est un ensemble de couches imbriquées : contenu au centre, puis padding, puis bordure, puis margin à l’extérieur.

Les quatre couches

Lisez la boîte de l’intérieur vers l’extérieur.

📊 Couches du modèle de boîte

Couche Où elle se place Rôle au quotidien
Contenu Centre Texte, images et enfants vivent ici ; width / height mesurent souvent cela
Padding Entre contenu et bordure Coussin intérieur ; le fond le remplit en général
Bordure (border) Autour du padding Le bord dessiné de la boîte
Margin À l’extérieur de la bordure Écart extérieur qui sépare cette boîte des voisins

Commencer par la taille du contenu seule

Une largeur simple sans padding ni bordure garde l’histoire claire.

Largeur de contenu seule

css
CSS Code 
.box-content {
width: 200px;
background-color: #ccfbf1;
}

Ajouter du padding — la zone peinte grandit

Le padding se place à l’intérieur de la bordure. Dans le modèle par défaut content-box, le padding s’ajoute hors de la largeur du contenu, donc la boîte peinte s’élargit.

Contenu plus padding

css
CSS Code 
.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* Le contenu reste à 200px ; le padding ajoute 20px de chaque côté */

Ajouter une bordure — un autre anneau

La bordure enveloppe le padding. Avec le sizing par défaut, l’épaisseur de bordure ajoute aussi à la taille extérieure de la boîte de bordure.

Contenu, padding et bordure

css
CSS Code 
.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

Réunir les quatre couches

Le margin ne peint pas le fond ; il éloigne seulement les voisins.

Recette complète du modèle de boîte

css
CSS Code 
.card {
width: 200px;          /* contenu */
padding: 16px;         /* coussin intérieur */
border: 2px solid #134e4a; /* bord */
margin: 24px;          /* écart extérieur */
background-color: #ecfdf5;
}

Même largeur, taille totale différente

Deux boîtes peuvent partager width: 200px et pourtant paraître très différentes dès que padding et bordure entrent dans la recette.

Comparer simple et rembourré

css
CSS Code 
.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Les deux revendiquent width 200px ; .padded occupe plus d’espace horizontal */

Règle par défaut à retenir

Par défaut (box-sizing: content-box), width et height décrivent la boîte de contenu. Padding et bordure rendent souvent la boîte visible finale plus grande. Une leçon ultérieure couvre box-sizing: border-box, qui change ce calcul.

À vous d’essayer

  1. Construisez .box-content avec seulement width: 200px et un fond.
  2. Copiez, ajoutez padding: 20px, et observez la zone peinte grandir.
  3. Ajoutez une bordure épaisse et regardez encore la taille totale.
  4. Ajoutez margin: 24px et confirmez que les voisins s’éloignent sans que le fond remplisse cet écart.
  5. Placez .bare et .padded côte à côte — même largeur déclarée, empreinte différente.

Erreurs fréquentes

  • Croire que le margin fait partie du remplissage de fond (il est dehors et souvent transparent)
  • Déclarer width: 200px et s’attendre à ce que la boîte de bordure reste exactement 200px après un gros padding (pas avec content-box)
  • Mélanger l’ordre des couches (contenu → padding → bordure → margin)
  • Confondre outline et border (autre outil)
  • Passer aux habitudes border-box avant de comprendre le modèle par défaut

Résumé

  • Chaque élément a des couches contenu, padding, bordure et margin
  • Le padding est à l’intérieur de la bordure ; le margin à l’extérieur
  • width/height par défaut mesurent la boîte de contenu
  • Padding et bordure augmentent souvent la taille visible totale
  • Le margin crée une séparation extérieure sans peindre le fond
  • box-sizing (prochaine leçon spécialisée) peut changer le calcul de largeur

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel