Margin vs Padding

Chaque élément HTML est une boite.

Comprendre cette notion évite beaucoup d'erreurs de mise en page.

• Margin : espace exterieur
• Padding : espace interieur

.card {
  margin: 1rem;
  padding: 1rem;
}

Si les blocs se collent entre eux, augmenter margin. Si le contenu colle au bord, augmenter padding.

Règle mémoire :

• margin éloigne un élément de ses voisins
• padding donne de l'air au contenu à l'intérieur de l'élément

A retenir

Quand un composant "respire mal", pose-toi la question : faut-il agir sur l'espace externe (margin) ou interne (padding) ? Cette distinction est fondamentale pour maitriser les layouts.

Mini pratique

Crée une carte avec un titre et un texte. Teste plusieurs valeurs de margin et padding pour voir l'impact visuel.

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.