1. Inclure bordure et padding dans la taille

Objectifs de la leçon

• Stabilise la largeur de la carte quand son espace intérieur et sa bordure augmentent.
• Appliquer box-sizing au bon périmètre.
• Conserver toutes les décisions CSS 00 et CSS 01.

Modèle de boîte

Observe d'abord la largeur disponible, la bordure et la zone réellement occupée par le contenu.

Modifie une seule relation à la fois pour distinguer taille, espace intérieur et espace extérieur.

Texte réel

Relis la carte avec plusieurs lignes et un identifiant sans espace.

Une valeur robuste doit rester utile quand la taille du viewport ou du texte change.

Preuve

Inspecte la valeur calculée plutôt que de juger seulement l'apparence.

Compare 375 px et desktop sans supprimer les règles certifiées des modules précédents.

Vocabulaire lié

• box-sizing — Propriété travaillée avec la valeur border-box.
• mesure — Longueur confortable d'une ligne de texte.
• contenu extrême — Mot, URL ou identifiant plus long que le cas habituel.

Validation

• Je distingue la zone modifiée.
• Je conserve les règles cumulatives.
• Je vérifie contenu long et petite largeur.