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
Can you explain the difference between margin and padding in more detail?
How do I choose the right spacing utility for my layout?
Are there responsive margin and padding classes in Tailwind CSS?
Awesome!
Completion rate improved to 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 !
