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 !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.57Utilitaires d'Espacement
Glissez pour afficher le menu
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 !
