Tailwind CSS fournit ' marge » des classes utilitaires qui permettent aux utilisateurs de contrôler l'espacement autour des éléments. Le marge horizontale ajoute de l'espace à gauche et à droite d'un élément, alors qu'un marge verticale ajoute de l'espace en haut et en bas d'un élément. Tailwind propose différentes classes utilitaires pour ajouter des marges horizontales ou verticales aux éléments souhaités.
Cet article illustrera :
Comment ajouter une marge horizontale dans Tailwind ?
Pour ajouter une marge horizontale à un élément dans Tailwind, le ' mx-
Syntaxe
< élément classe = 'mx-
Ici, 'mx' représente 'l'axe des x' ou la 'marge horizontale'. Assurez-vous de remplacer «
Exemple : Application d'une marge horizontale à un élément HTML
Dans cet exemple, nous utiliserons le ' mx-10 ' classe utilitaire avec le ' Pour ajouter une marge verticale à un élément dans Tailwind, utilisez le ' ma- Syntaxe Exemple : Application d'une marge verticale à un élément HTML Dans cet exemple, nous utiliserons le ' mon-10 ' classe utilitaire avec le ' Pour ajouter la marge horizontale et verticale dans Tailwind, le ' mx-
< corps >
< div classe = 'h-screen mx-10 bg-violet-500' >
< p classe = 'texte-5xl centre de texte' > Marge dans CSS vent arrière p >
div >
corps >
Sortir 
La sortie ci-dessus montre la marge sur les côtés gauche et droit du conteneur. Cela indique que la marge horizontale a été appliquée avec succès à l'élément conteneur. Comment ajouter une marge verticale dans Tailwind ?
Ici, 'my' représente 'l'axe y' ou la 'marge verticale'. Assurez-vous de remplacer «
< div classe = 'h-96 mon-10 bg-violet-500' >
< p classe = 'texte-5xl centre de texte' > Marge dans CSS vent arrière p >
div >
corps >
Sortir 
La sortie ci-dessus montre la marge sur les côtés supérieur et inférieur du conteneur. Cela indique que la marge verticale a été effectivement appliquée à l'élément conteneur. Conclusion