Contenu du cours
Tailwind CSS pour le Développement Web
Tailwind CSS pour le Développement Web
Utilitaires d'Espacement
Vous faites un travail fantastique !
Un espacement approprié est crucial pour créer des mises en page visuellement attrayantes et bien structurées. Auparavant, nous avons utilisé des classes utilitaires de marge et de remplissage, mais explorons-les plus en détail.
Marge
Les utilitaires de marge dans Tailwind CSS vous permettent de contrôler l'espacement autour des éléments. Ils peuvent être appliqués en utilisant le préfixe m-, suivi d'une valeur de taille. Vous pouvez appliquer des marges à tous les côtés, ou à des côtés spécifiques (haut, droite, bas, gauche) en utilisant les préfixes respectifs (mt-, mr-, mb-, ml-).
Exemples
| Classe de Marge | Description |
|---|---|
m-4 | Applique une marge de 1rem (16px) à tous les côtés. |
mt-2 | Applique une marge de 0.5rem (8px) au côté supérieur. |
mr-6 | Applique une marge de 1.5rem (24px) au côté droit. |
mb-1 | Applique une marge de 0.25rem (4px) au côté inférieur. |
ml-3 | Applique une marge de 0.75rem (12px) au côté gauche. |
index.html
Padding
Les utilitaires de padding dans Tailwind CSS sont similaires aux classes utilitaires de marge, et la logique reste la même.
Ils peuvent être appliqués en utilisant le préfixe p-, suivi d'une valeur de taille. Vous pouvez appliquer du padding à tous les côtés, ou à des côtés spécifiques (haut, droite, bas, gauche) en utilisant les préfixes respectifs (pt-, pr-, pb-, pl-).
Exemples
| Classe de Padding | Description |
|---|---|
p-4 | Applique un padding de 1rem (16px) à tous les côtés. |
pt-2 | Applique un padding de 0.5rem (8px) au côté supérieur. |
pr-6 | Applique un padding de 1.5rem (24px) au côté droit. |
pb-1 | Applique un padding de 0.25rem (4px) au côté inférieur. |
pl-3 | Applique un padding de 0.75rem (12px) au côté gauche. |
index.html
Espacement Horizontal et Vertical
De plus, nous pouvons appliquer des marges/espacements aux axes horizontaux (_x-) ou verticaux (_y-).
Exemples
| Classe | Description |
|---|---|
mx-4 | Applique une marge de 1rem (16px) aux côtés gauche et droit. |
my-4 | Applique une marge de 1rem (16px) aux côtés supérieur et inférieur. |
px-4 | Applique un espacement de 1rem (16px) aux côtés gauche et droit. |
py-4 | Applique un espacement de 1rem (16px) aux côtés supérieur et inférieur. |
index.html
1. Quelle classe applique une marge de 1rem (16px) à tous les côtés d'un élément ?
2. Comment appliquez-vous un padding de 0.5rem (8px) au côté supérieur d'un élément ?
3. Quelles sont les classes Tailwind CSS pour appliquer une marge de 2rem (32px) aux côtés supérieur et inférieur d'un élément ?
Merci pour vos commentaires !
