Utilisation des utilitaires d'espacement pour la marge et le remplissage
Vous faites un excellent travail !
Un espacement approprié est essentiel pour créer des mises en page visuellement attrayantes et bien structurées. Précédemment, nous avons utilisé des classes utilitaires de marge et de remplissage, mais examinons-les plus en détail.
Marge
Les utilitaires de marge dans Tailwind CSS permettent de contrôler l'espacement autour des éléments. Ils peuvent être appliqués à l'aide du préfixe m-, suivi d'une valeur de taille. Il est possible d'appliquer des marges sur tous les côtés, ou sur des côtés spécifiques (haut, droite, bas, gauche) en utilisant les préfixes respectifs (mt-, mr-, mb-, ml-).
Exemples
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Rembourrage
Les utilitaires de rembourrage dans Tailwind CSS sont similaires aux classes utilitaires de marge, et la logique reste identique.
Ils peuvent être appliqués en utilisant le préfixe p-, suivi d'une valeur de taille. Il est possible d'appliquer le rembourrage sur tous les côtés, ou sur des côtés spécifiques (haut, droite, bas, gauche) à l'aide des préfixes respectifs (pt-, pr-, pb-, pl-).
Exemples
| Padding Class | Description |
|---|---|
p-4 | Applique un rembourrage de 1rem (16px) sur tous les côtés. |
pt-2 | Applique un rembourrage de 0.5rem (8px) sur le côté supérieur. |
pr-6 | Applique un rembourrage de 1.5rem (24px) sur le côté droit. |
pb-1 | Applique un rembourrage de 0.25rem (4px) sur le côté inférieur. |
pl-3 | Applique un rembourrage de 0.75rem (12px) sur le côté gauche. |
index.html
Espacement horizontal et vertical
De plus, il est possible d'appliquer des marges ou des rembourrages sur l'axe horizontal (_x-) ou vertical (_y-).
Exemples
| Class | Description |
|---|---|
mx-4 | Applique une marge de 1rem (16px) sur les côtés gauche et droit. |
my-4 | Applique une marge de 1rem (16px) sur les côtés supérieur et inférieur. |
px-4 | Applique un rembourrage de 1rem (16px) sur les côtés gauche et droit. |
py-4 | Applique un rembourrage de 1rem (16px) sur les côtés supérieur et inférieur. |
index.html
1. Quelle classe applique une marge de 1rem (16px) sur tous les côtés d’un élément ?
2. Comment appliquer un padding de 0,5rem (8px) sur le côté supérieur d’un élément ?
3. Quelles sont les classes Tailwind CSS pour appliquer une marge de 2rem (32px) sur les 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
Génial!
Completion taux amélioré à 3.57Utilisation des utilitaires d'espacement pour la marge et le remplissage
Glissez pour afficher le menu
Vous faites un excellent travail !
Un espacement approprié est essentiel pour créer des mises en page visuellement attrayantes et bien structurées. Précédemment, nous avons utilisé des classes utilitaires de marge et de remplissage, mais examinons-les plus en détail.
Marge
Les utilitaires de marge dans Tailwind CSS permettent de contrôler l'espacement autour des éléments. Ils peuvent être appliqués à l'aide du préfixe m-, suivi d'une valeur de taille. Il est possible d'appliquer des marges sur tous les côtés, ou sur des côtés spécifiques (haut, droite, bas, gauche) en utilisant les préfixes respectifs (mt-, mr-, mb-, ml-).
Exemples
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Rembourrage
Les utilitaires de rembourrage dans Tailwind CSS sont similaires aux classes utilitaires de marge, et la logique reste identique.
Ils peuvent être appliqués en utilisant le préfixe p-, suivi d'une valeur de taille. Il est possible d'appliquer le rembourrage sur tous les côtés, ou sur des côtés spécifiques (haut, droite, bas, gauche) à l'aide des préfixes respectifs (pt-, pr-, pb-, pl-).
Exemples
| Padding Class | Description |
|---|---|
p-4 | Applique un rembourrage de 1rem (16px) sur tous les côtés. |
pt-2 | Applique un rembourrage de 0.5rem (8px) sur le côté supérieur. |
pr-6 | Applique un rembourrage de 1.5rem (24px) sur le côté droit. |
pb-1 | Applique un rembourrage de 0.25rem (4px) sur le côté inférieur. |
pl-3 | Applique un rembourrage de 0.75rem (12px) sur le côté gauche. |
index.html
Espacement horizontal et vertical
De plus, il est possible d'appliquer des marges ou des rembourrages sur l'axe horizontal (_x-) ou vertical (_y-).
Exemples
| Class | Description |
|---|---|
mx-4 | Applique une marge de 1rem (16px) sur les côtés gauche et droit. |
my-4 | Applique une marge de 1rem (16px) sur les côtés supérieur et inférieur. |
px-4 | Applique un rembourrage de 1rem (16px) sur les côtés gauche et droit. |
py-4 | Applique un rembourrage de 1rem (16px) sur les côtés supérieur et inférieur. |
index.html
1. Quelle classe applique une marge de 1rem (16px) sur tous les côtés d’un élément ?
2. Comment appliquer un padding de 0,5rem (8px) sur le côté supérieur d’un élément ?
3. Quelles sont les classes Tailwind CSS pour appliquer une marge de 2rem (32px) sur les côtés supérieur et inférieur d’un élément ?
Merci pour vos commentaires !
