Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Utilitaires d'Espacement | Notions de Base en Mise en Page
Tailwind CSS pour le Développement Web
course content

Contenu du cours

Tailwind CSS pour le Développement Web

Tailwind CSS pour le Développement Web

1. Introduction et Configuration
2. Concepts de Base et Style de Base
3. Construction de Composants de Base
4. Notions de Base en Mise en Page
5. Réactivité et Personnalisation

book
Défi : Utilitaires d'Espacement

Tâche

Complétez la structure HTML fournie en remplissant les classes Tailwind CSS manquantes selon les exigences d'espacement données.

  • Premier div : Appliquez une marge de 2rem (32px) sur tous les côtés et un padding de 1rem (16px) sur tous les côtés ;
  • Deuxième div : Appliquez une marge supérieure de 1rem (16px) et une marge inférieure de 2rem (32px). Appliquez un padding de 0.5rem (8px) sur tous les côtés ;
  • Troisième div : Appliquez une marge droite de 1.5rem (24px) et une marge gauche de 0.75rem (12px). Appliquez un padding de 1.5rem (24px) sur tous les côtés.
html

index.html

copy
  1. Pour le premier div, utilisez m-8 pour la marge et p-4 pour le padding.
  2. Pour le deuxième div, utilisez mt-4 mb-8 pour la marge et p-2 pour le padding.
  3. Pour le troisième div, utilisez mr-6 ml-3 pour la marge et p-6 pour le padding.
html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 2
We're sorry to hear that something went wrong. What happened?
some-alt