🏆 Challenge #N5 · Box model HTML · challenges/N5_box-model.html CSS · challenges/css/N5_box-model.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

margin: 1rem; // Défini une marge extérieure de 1rem sur tous les côtés
margin: 1rem 5%; // Défini une marge extérieure de 1rem verticalement (en haut et en bas) et 5% horizontalement (à droite et à gauche)
margin: 1rem 5% 3px auto; // Défini la marge extérieure de chaque côté en partant du haut et en tournant le sens des aiguilles d'une montre : haut, droite, bas, gauche


padding: 1rem; // Défini une marge intérieure de 1rem sur tous les côtés
padding: 1rem 5%; // Défini une marge intérieure de 1rem verticalement (en haut et en bas) et 5% horizontalement (à droite et à gauche)
padding: 1rem 5% 3px auto; // Défini la marge intérieure de chaque côté en partant du haut et en tournant le sens des aiguilles d'une montre : haut, droite, bas, gauche


margin-top: 1rem; // Défini une marge extérieure de 1rem en haut
padding-right: 1rem; // Défini une marge intérieure de 1rem à droite
margin-bottom: 1rem; // Défini une marge extérieure de 1rem en bas
padding-left: 1rem; // Défini une marge intérieure de 1rem à gauche

1️⃣ Manipuler marges intérieures et extérieures

Pour chaque boîte, définissez les marges demandées.

1rem de marge intérieure

1rem de marge extérieure à droite

40% de longueur

auto en hauteur

50% de longueur

5rem de marge extérieure en haut

auto en marge extérieure à gauche.

3rem en marge intérieure.

🎯 Résultat attendu

Résultat attendu