Les raccourcis du pro

🎯 Objectif

Écrire padding et margin en deux valeurs, et découvrir le centrage horizontal avec le mot auto.

📖 Exemple

Une invitation d'anniversaire, aérée et centrée dans la page :

<div class="invitation">
    <h2>Les 20 ans de Léa</h2>
    <p>Samedi dès 19 h, apporte ton meilleur déguisement.</p>
</div>

.invitation {
    background-color: #eab308;
    width: 260px;
    padding: 8px 20px;
    margin: 24px auto;
}

Pourquoi si peu de lignes ? Deux valeurs, deux axes : la première sert le haut et le bas (8 px), la seconde la gauche et la droite (20 px) — vertical d'abord, horizontal ensuite, pour padding comme pour margin. Et auto n'est pas une mesure : c'est une instruction — « calcule la place qui reste et partage-la en deux parts égales ». L'invitation se centre toute seule… à une condition : avoir une largeur définie. Sans width, un bloc occupe déjà toute la ligne, il ne reste rien à partager.

💡 Tip de pro : margin: 0 auto centre le web entier. Le duo max-width plus marges automatiques est la mise en page la plus utilisée de toute l'histoire du CSS — on y revient au module 10.

📝 Consigne

La règle de la classe carte est ouverte dans l'onglet CSS, avec sa largeur déjà réglée. Ajoute-lui deux raccourcis :

1. Un padding en deux valeurs : 12 pixels en haut et en bas, 24 pixels à gauche et à droite
2. Une margin en deux valeurs : 16 pixels en haut et en bas, et le mot qui centre la carte à l'horizontale