Box Sizing en CSS
Vous savez déjà que le padding et la bordure peuvent rendre une boîte plus large que le width déclaré. box-sizing choisit la règle de ce calcul : width veut-il dire « contenu seul », ou « contenu plus padding plus bordure » ?
Deux modèles en un coup d’œil
📊 content-box vs border-box
| Modèle | Ce que couvrent width / height |
Effet au quotidien |
|---|---|---|
content-box (par défaut) |
Contenu seul | Padding et bordure s’ajoutent hors de la taille déclarée |
border-box |
Contenu + padding + bordure | La taille déclarée est le bord extérieur ; le contenu se rétrécit |
| Margin | Inclus dans aucun des deux | L’écart extérieur reste séparé de box-sizing |
Par défaut : content-box
Avec le modèle par défaut, width: 200px mesure le contenu. Ajoutez padding et bordure, et la boîte peinte grandit.
Content-box (par défaut)
css.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Contenu 200px + padding + bordure → total plus large */Passez à border-box
Avec border-box, le même width: 200px inclut padding et bordure. Le bord extérieur reste plus près de 200px ; la zone de contenu rétrécit.
Dimensionnement border-box
css.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* La boîte de bordure externe vise 200px ; le contenu se rétrécit */Mêmes chiffres, empreinte différente
Placez les deux modèles côte à côte avec la même largeur, padding et bordure.
Comparer les deux modèles
css.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}
.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Mêmes déclarations ; .contenty occupe plus d’espace horizontal */Pourquoi les équipes aiment border-box
Quand une carte doit remplir exactement une colonne — par ex. width: 100% avec padding — border-box empêche la carte de déborder du parent.
Carte amie des colonnes
css.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}Une habitude globale calme
Beaucoup de feuilles de style mettent border-box une fois pour tout, afin que le calcul quotidien des largeurs reste prévisible. Le margin reste dehors.
Habitude universelle border-box
css*,
*::before,
*::after {
box-sizing: border-box;
}À vous d’essayer
- Construisez
.panel-contentavecwidth: 200px, padding et bordure sous content-box. - Copiez en
.panel-borderavecbox-sizing: border-box— regardez la taille externe se rapprocher de 200px. - Placez
.contentyet.borderishcôte à côte avec les mêmes chiffres. - Faites une carte
width: 100%avec padding ; basculez box-sizing et voyez laquelle déborde. - Essayez l’habitude universelle
*sur une petite page démo.
Erreurs fréquentes
- Croire que border-box inclut aussi le margin (non)
- Oublier que le défaut est content-box jusqu’à ce que vous le changiez
- S’attendre à ce que outline suive box-sizing (outline reste dehors et n’occupe toujours pas d’espace de mise en page)
- Déclarer
width: 100%avec un gros padding sous content-box et s’étonner du débordement - Mélanger les pourcentages sans savoir quel modèle de dimensionnement est actif
Résumé
- Par défaut
box-sizing: content-boxmesure le contenu ; padding et bordure s’ajoutent border-boxgarde padding et bordure dans la largeur/hauteur déclarée- Le margin est hors des deux modèles
- Border-box simplifie souvent les largeurs de colonne et les cartes
width: 100% - Un reset universel border-box est une habitude courante et calme
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 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