Le modèle de boîte (Box Model) — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Bordure

Ajoute une bordure de 2px solide et grise à une image.

Voir le corrigé
img {
    border: 2px solid gray;
}

#2 — Padding

Ajoute une marge interne de 15px de tous les côtés pour la classe 'card'.

Voir le corrigé
.card {
    padding: 15px;
}

#3 — Margin Auto

Centre horizontalement un bloc de 500px de large en utilisant les marges.

Voir le corrigé
.container {
    width: 500px;
    margin: 0 auto;
}

#4 — Box-sizing

Force le modèle de boîte à inclure le padding et la bordure dans la largeur totale.

Voir le corrigé
* {
    box-sizing: border-box;
}

#5 — Border Radius

Arrondis les coins d'un bouton de 10px.

Voir le corrigé
button {
    border-radius: 10px;
}
Besoin d'aide ?
Tuteur Virtuel
Bonjour ! Je suis votre tuteur virtuel. Comment puis-je vous aider avec ce cours aujourd'hui ?
Historique des conversations
Chargement...