Carte produit
Transforme la carte en bloc lisible avec padding, border-radius et shadow.
Objectifs de la leçon
- Identifier les couches du modèle de boîte
- Créer une carte lisible
- Distinguer padding et margin
Comprendre le principe
À la fin de cette leçon, tu sauras identifier les couches du modèle de boîte.
À la fin de cette leçon, tu sauras créer une carte lisible.
À la fin de cette leçon, tu sauras distinguer padding et margin.
Surface structurée
Le contenu respire, la forme est cohérente et l'ombre indique l'élévation.
padding protège le contenu des bords.
border-radius définit la forme des coins.
Pourquoi éviter : Espacement confondu
La marge sépare la carte des autres, mais ne crée aucun espace entre son texte et ses bords.
Le modèle de boîte permet de raisonner sur l'espace au lieu d'ajuster des valeurs au hasard.
Vocabulaire lié
- contenu — Zone occupée par le texte ou les médias.
- padding — Espace intérieur entre contenu et bordure.
- bordure — Limite visible de la boîte.
- margin — Espace extérieur séparant les boîtes.
Validation
- Je peux expliquer : Le modèle de boîte permet de raisonner sur l'espace au lieu d'ajuster des valeurs au hasard.
- Je peux identifier les couches du modèle de boîte.
- Je peux créer une carte lisible.