Box-sizing : Content-Box ou Border-Box
Comprenez comment box-sizing modifie l’inclusion du remplissage et de la bordure dans les calculs de largeur et de hauteur.
Box-sizing : Content-Box ou Border-Box est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Le problème de box-sizing
Par défaut, CSS définit width uniquement sur la zone de contenu. L'ajout d'un remplissage ou d'une bordure augmente la taille réellement affichée de l'élément, ce qui peut prêter à confusion et provoquer des erreurs.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Par défaut)
box-sizing: content-box est la valeur par défaut. width et height s’appliquent au contenu uniquement. L’espacement intérieur et la bordure sont ajoutés par-dessus, ce qui agrandit l’élément au-delà de la taille définie.
border-box
Avec box-sizing: border-box, width et height incluent le contenu + l’espacement intérieur + la bordure. L’élément conserve exactement la taille déclarée, quelle que soit la valeur de l’espacement intérieur ou de la bordure.
<div class="box">Exactly 200px rendered width</div>
La réinitialisation universelle avec border-box
Appliquez border-box globalement à l’aide de la réinitialisation universellement recommandée :
<div class="demo-box">Width stays exactly 200px</div>
Pourquoi utiliser inherit plutôt que *
Un autre modèle permet aux composants de remplacer box-sizing si nécessaire :
<div class="demo-box">Inherited border-box sizing</div>
Largeur en pourcentage + espacement intérieur
L’avantage pratique principal de border-box concerne les largeurs en pourcentage. Un élément avec width: 50% et un espacement intérieur de 20px reste exactement à 50 % de son parent, sans débordement.
<div class="col">50% wide column with padding, no overflow</div>
border-box n’inclut pas margin
Même avec border-box, la marge n’est pas incluse dans la largeur déclarée. Les marges ajoutent toujours de l’espace à l’extérieur de l’élément, en plus de ses dimensions définies.
Historique : pourquoi content-box est-il la valeur par défaut ?
Historiquement, les navigateurs n’étaient pas d’accord sur le modèle de boîte. Le W3C a standardisé content-box, tandis que IE utilisait border-box. Le CSS moderne utilise content-box par défaut pour respecter le W3C, mais pratiquement tous les projets le remplacent par border-box.
Inspecter le modèle de boîte dans DevTools
Dans Chrome DevTools, le panneau Elements affiche un diagramme du modèle de boîte avec les dimensions exactes du contenu, de l’espacement intérieur, de la bordure et de la marge. C’est le moyen le plus rapide de diagnostiquer les problèmes de dimensionnement.
Grid et Flexbox utilisent border-box en interne
CSS Grid et Flexbox dimensionnent toujours leurs pistes et leurs éléments selon la sémantique de border-box, quelle que soit la valeur de box-sizing de l’élément lui-même. Le calcul des dimensions reste ainsi prévisible.
min/max avec border-box
min-width, max-width, min-height et max-height fonctionnent comme width : ils incluent l’espacement intérieur et la bordure lorsque border-box est actif.
Vérification rapide
Avec box-sizing: border-box, un élément déclaré comme width: 300px; padding: 30px; possède une zone de contenu d’une largeur de :
Récapitulatif
box-sizing: border-box inclut l’espacement intérieur et la bordure dans la largeur déclarée, ce qui empêche une augmentation inattendue de la taille. Appliquez-le globalement avec *, *::before, *::after { box-sizing: border-box }. Les marges ne sont incluses dans aucun des deux modèles de boîte.
Questions Fréquemment Posées
La leçon « Box-sizing : Content-Box ou Border-Box » est-elle gratuite ?
Oui — le texte complet de « Box-sizing : Content-Box ou Border-Box » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Box-sizing : Content-Box ou Border-Box » ?
Comprenez comment box-sizing modifie l’inclusion du remplissage et de la bordure dans les calculs de largeur et de hauteur. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Box-sizing : Content-Box ou Border-Box » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Comprendre la largeur, la hauteur, la marge et le remplissage
- Styles, largeur et couleur des bordures
- Box-sizing : Content-Box ou Border-Box
- Contour et ombre de boîte