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
Qu'est-ce Que Tailwind CSS ?À Qui S'adresse le Cours ?Méthodes d'InstallationQuiz
2. Concepts de Base et Style de Base
Comprendre les Classes UtilitairesApplication des Classes UtilitairesStylisation de Base - CouleursStylisation de Base - BorduresStyle de Base - OmbresDéfi : Style de BaseUtilitaires de TypographieDéfi : Application des Utilitaires de Typographie
3. Construction de Composants de Base
BoutonsDéfi : BoutonsCartesDéfi : CartesFormulairesDéfi : Formulaires
4. Notions de Base en Mise en Page
Utilitaires d'EspacementDéfi : Utilitaires d'EspacementUtilitaires FlexboxDéfi : Utilitaires FlexboxUtilitaires de GrilleDéfi : Utilitaires de Grille
5. Réactivité et Personnalisation
Conception RéactiveDéfi : Conception RéactiveModifier le Thème par DéfautConclusion et Prochaines Étapes

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

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

course content

Contenu du cours

Tailwind CSS pour le Développement Web

Tailwind CSS pour le Développement Web

1. Introduction et Configuration
Qu'est-ce Que Tailwind CSS ?À Qui S'adresse le Cours ?Méthodes d'InstallationQuiz
2. Concepts de Base et Style de Base
Comprendre les Classes UtilitairesApplication des Classes UtilitairesStylisation de Base - CouleursStylisation de Base - BorduresStyle de Base - OmbresDéfi : Style de BaseUtilitaires de TypographieDéfi : Application des Utilitaires de Typographie
3. Construction de Composants de Base
BoutonsDéfi : BoutonsCartesDéfi : CartesFormulairesDéfi : Formulaires
4. Notions de Base en Mise en Page
Utilitaires d'EspacementDéfi : Utilitaires d'EspacementUtilitaires FlexboxDéfi : Utilitaires FlexboxUtilitaires de GrilleDéfi : Utilitaires de Grille
5. Réactivité et Personnalisation
Conception RéactiveDéfi : Conception RéactiveModifier le Thème par DéfautConclusion et Prochaines Étapes

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
Nous sommes désolés de vous informer que quelque chose s'est mal passé. Qu'est-il arrivé ?
some-alt