Exercice 8.4 · 6 min · 0 tentative
La boîte qui déborde
🎯 Objectif
Comprendre pourquoi une carte de 300 pixels en mesure 344 — et réparer ça avec une seule ligne. C'est l'exercice le plus important du module.
📝 Consigne
Le CSS est déjà écrit, et il contient un bug. La colonne grise fait 300 pixels. La carte annonce 300 pixels elle aussi. Et pourtant, elle dépasse à droite.
Fais le calcul avec le navigateur :
300 la largeur demandée (le contenu)
+ 20 + 20 le padding, à gauche et à droite
+ 2 + 2 la bordure, des deux côtés
= 344 pixels à l'écran
Voilà le piège : par défaut, width ne décrit que le contenu — le padding et la bordure viennent se coller par-dessus. Le nombre 344 n'apparaît nulle part dans ton code, et c'est pourtant lui qui décide de la mise en page.
À toi de réparer. Ajoute une seule déclaration à la règle de la classe carte : la propriété box-sizing, avec la valeur qui demande de compter la bordure et le padding à l'intérieur des 300 pixels. Ne touche à rien d'autre — ni à la largeur, ni au padding, ni à la bordure : le but est de réparer la cause, pas de masquer le symptôme.
Résultat attendu
La carte cesse de dépasser et rentre exactement dans la colonne grise, bordure comprise. Le texte, lui, garde ses 20 pixels d'air. 🎯
Ce qui est vérifié
- Ajouter la déclaration box-sizing à la carte
- Compter la bordure et le padding dans la largeur
- Garder la largeur de 300 pixels annoncée
- Garder les 20 pixels de padding
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)