De l'air à l'intérieur

🎯 Objectif

Poser un fond sur une boîte, puis décoller son contenu du bord avec padding.

📖 Exemple

L'étiquette d'un pot de confiture — le code, et ce que le navigateur en fait :

<div class="etiquette">
  <h2>Confiture d'abricot</h2>
  <p>Récolte du verger, cuite au chaudron.</p>
</div>

.etiquette {
  background-color: #d45e95;
  padding: 32px;
}

Pourquoi ces deux déclarations, dans cet ordre ? Le fond d'abord : sans lui, la boîte est invisible — impossible de dire où elle commence et où elle finit. Le padding ensuite : par défaut il vaut zéro, et le texte colle au bord. Ici, une seule valeur pousse le contenu de 32 pixels vers l'intérieur, sur les quatre côtés à la fois.

Remarque un détail qui n'en est pas un : le fond rose couvre aussi le padding. L'air intérieur fait partie de la boîte, il est donc peint avec elle.

💡 Règle de pro : jamais de texte à moins de 16 pixels du bord. Quand un design paraît « bon marché » sans qu'on sache pourquoi, c'est neuf fois sur dix un padding trop petit.

📝 Consigne

Le HTML est fourni : une carte du club photo, avec son titre et son texte. Dans l'onglet CSS, écris une seule règle pour la classe carte, avec deux déclarations :

1. Un fond couleur #eab308 — l'or du club. Écris-le seul d'abord, et regarde l'aperçu : le texte est collé au bord
2. Puis un padding de 24 pixels sur les quatre côtés — et regarde le texte se décoller