De l'espace autour

🎯 Objectif

Écarter des boîtes avec margin, et comprendre une bonne fois où elle agit — par rapport à padding.

📖 Exemple

Deux affiches de tournoi, séparées par une marge — le code, et ce que le navigateur en fait :

<div class="affiche">
  <h2>Tournoi d'échecs</h2>
  <p>Vendredi 19 h, salle communale.</p>
</div>

<div class="affiche">
  <h2>Finale de ping-pong</h2>
  <p>Samedi 10 h, halle des fêtes.</p>
</div>

.affiche {
  background-color: #eab308;
  padding: 16px;
  margin-bottom: 32px;
}

Pourquoi deux propriétés d'espace ? Regarde les couleurs : l'or qui entoure le texte, c'est le padding — peint avec la boîte, donc dedans. Le blanc entre les deux affiches, c'est la margin — jamais peinte, donc dehors. Une marge est toujours transparente : c'est le test infaillible, et il marche sur n'importe quel site. La phrase à retenir : padding pousse le contenu vers l'intérieur, margin pousse les voisins vers l'extérieur.

💡 Tip de pro : les marges verticales fusionnent. 32 pixels sous une affiche et 32 au-dessus de la suivante ne font pas 64 — deux marges verticales qui se touchent n'en forment qu'une, la plus grande des deux. Ça surprend tout le monde une fois, puis ça rend service : on peut poser une marge partout sans craindre de doubler les espaces. Les marges horizontales, elles, s'additionnent bel et bien.

📝 Consigne

Trois cartes du club photo, collées les unes aux autres. Dans l'onglet CSS, deux choses à écrire :

1. Dans la règle de la classe carte, ajoute 24 pixels d'espace sous chaque carte, avec margin-bottom
2. Regarde ensuite le haut d'une carte : le titre flotte bien plus bas que les 20 pixels de padding annoncés — c'est le navigateur, qui pose ses propres marges sur les titres. Ouvre une nouvelle règle pour les <h2> et remets leur marge du haut à zéro, avec margin-top