Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Modèle de boîte : margin, padding et box-sizing | SovranCode

Contenu du coursThe Box Model and Sizing · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS49 min

The Box Model and Sizing

Reason about content, padding, borders, margins, and predictable element sizing.

Chaque élément affiché participe au modèle de boîte. Avec border-box, la largeur déclarée inclut le contenu, le padding et la bordure, ce qui facilite le dimensionnement. Les marges créent de l’espace à l’extérieur ; le padding sépare le contenu du bord à l’intérieur.

Comprendre ce que la largeur inclut

Repérez la règle globale box-sizing, puis la largeur, le padding et la bordure de l’encadré. Avant de modifier le code, déterminez ce qui entre dans la largeur déclarée et ce qui reste à l’extérieur.

*, *::before, *::after {
  box-sizing: border-box;
}

.notice {
  width: min(100%, 42rem);
  padding: 1.25rem;
  border: 2px solid #10231f;
  margin-inline: auto;
}

Les bons réflexes

Appliquez border-box aux éléments et à leurs pseudo-éléments pour utiliser un dimensionnement cohérent.
Utilisez padding à l’intérieur des composants et gap pour espacer des éléments dans une disposition Flexbox ou Grid.
Examinez la cause d’un débordement avant de le masquer.

L’erreur à éviter

Avec content-box, le padding et les bordures s’ajoutent à une largeur fixe. L’ensemble peut alors dépasser d’un écran étroit, même si la largeur déclarée semblait convenir.

ATELIER CSS · ENVIRON 25 MIN

Comprendre pourquoi une carte déborde

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Distinguer la largeur déclarée de l’espace occupé

Avec content-box, width définit la largeur du contenu : le padding et les bordures s’ajoutent pour former la largeur extérieure de la boîte, hors marges. Une largeur de 300px avec 20px de padding et une bordure de 2px de chaque côté occupe donc 344px. Avec border-box, ces mêmes 300px comprennent le padding et la bordure ; il reste 256px pour le contenu. Dans les deux cas, les marges restent à l’extérieur. Repérez chaque zone dans le schéma du modèle de boîte des outils de développement, puis prévoyez le résultat avant de changer box-sizing.

Un débordement révèle une contrainte à examiner

Un mot sans espaces, un enfant de taille fixe ou une largeur minimale intrinsèque peuvent dépasser d’un parent qui semble pourtant souple. Masquer le débordement cache parfois le symptôme en coupant du contenu ou le focus. Repérez l’enfant qui manque de place, puis choisissez une correction adaptée : dimensionnement flexible, retour à la ligne ou zone de défilement pour un contenu réellement large. En disposition bloc normale, certaines marges verticales peuvent fusionner : elles ne s’additionnent donc pas toujours. Avec Flexbox ou Grid, gap permet souvent d’exprimer plus clairement l’espacement voulu entre composants.

Comprendre pourquoi la largeur change

Prévoyez la différence, puis comparez les deux aperçus. Ils utilisent exactement le même HTML.

Avant correction

.card { box-sizing:content-box; width:220px; padding:24px; border:4px solid #2458a0; }

Après correction

.card { box-sizing:border-box; width:220px; padding:24px; border:4px solid #2458a0; }

Avant : 220 + 48 + 8 = 276px de largeur hors marges. Après : la largeur hors marges reste de 220px et le contenu dispose de 164px. Le texte revient à la ligne plus tôt, car le padding et les bordures sont désormais compris dans la largeur déclarée.

Examiner le HTML commun

<div class="card">Largeur déclarée : 220px</div>

Essayez la correction dans l’éditeur ci-dessous, puis testez une largeur réduite et un contenu plus long.

Donnez une largeur de 300px à la carte. Passez de content-box à border-box, puis relevez la largeur incluant les bordures dans les outils de développement.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font: 1rem/1.7 system-ui; padding: 1rem; margin: 0; }
.card { width: min(100%, 30rem); padding: 20px; border: 2px solid #254fc0; margin-inline: auto; background: #edf2f7; }
h1 { margin-top: 0; }
</style>
</head>
<body>
<main><article class="card"><h1>Une carte aux dimensions prévisibles</h1><p>Redimensionnez la fenêtre et examinez le contenu, le padding, la bordure et l’espace extérieur.</p></article></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font: 1rem/1.7 system-ui; padding: 1rem; margin: 0; }
.card { width: min(100%, 30rem); padding: 20px; border: 2px solid #254fc0; margin-inline: auto; background: #edf2f7; }
h1 { margin-top: 0; }
</style>
</head>
<body>
<main><article class="card"><h1>Une carte aux dimensions prévisibles</h1><p>Redimensionnez la fenêtre et examinez le contenu, le padding, la bordure et l’espace extérieur.</p></article></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.card { width: 100%; padding: 20px; border: 2px solid; box-sizing: content-box; }

Voir la correction et son explication

.card { width: 100%; padding: 20px; border: 2px solid; box-sizing: border-box; }

Avec content-box, le padding et les bordures s’ajoutent aux 100% de la largeur du parent. border-box les inclut dans cette largeur déclarée.

À VOUS DE JOUER

Créer sans recopier l’exemple

Placez deux cartes l’une sous l’autre dans un conteneur étroit. Ajoutez du padding, des bordures et un mot long, puis corrigez tout débordement horizontal sans couper le contenu.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comprendre pourquoi une carte déborde — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Comprendre pourquoi une carte déborde</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comprendre pourquoi une carte déborde — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Comprendre pourquoi une carte déborde</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Vos calculs précisent si le padding et les bordures sont inclus dans la largeur ou s’y ajoutent.La page ne présente pas de défilement horizontal dans une fenêtre de 320px de large.L’espacement correspond à un choix explicite et ne dépend pas d’une fusion de marges accidentelle.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quelle largeur hors marges occupe une boîte en content-box de 300px, avec 20px de padding et une bordure de 2px de chaque côté ?300px322px344px

2. border-box inclut-il les marges dans la largeur déclarée ?Oui, toujoursNon, les marges restent à l’extérieurUniquement si la boîte est centrée

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

The Box Model and Sizing

Comprendre ce que la largeur inclut

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Comprendre pourquoi une carte déborde

Distinguer la largeur déclarée de l’espace occupé

Un débordement révèle une contrainte à examiner

Comprendre pourquoi la largeur change

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris