Box-sizing

Règle recommandée dans presque tous les projets :

* {
  box-sizing: border-box;
}

Avec border-box, largeur et hauteur incluent contenu, padding et border. Resultat : layouts plus prévisibles et moins de débordements.

Sans cette règle, un élément peut dépasser sa largeur prévue dès qu'on ajoute du padding. Avec border-box, le comportement reste stable et plus facile à raisonner.

A retenir

box-sizing: border-box est une convention quasi universelle. Elle simplifie les calculs mentaux et évite des surprises de débordement.

Mini pratique

Crée deux blocs de même largeur, l'un en content-box, l'autre en border-box, avec le même padding. Compare leur largeur réelle dans le navigateur.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.