Dans Tailwind CSS, un marge est utilisé pour contrôler l'espacement autour de l'élément spécifique. Il ajoute de l'espace entre l'élément appliqué et ses éléments environnants. Tailwind CSS fournit un ensemble d'utilitaires de marge et de valeurs de marge qui permettent aux utilisateurs de personnaliser l'espacement autour des éléments souhaités. De plus, les utilisateurs peuvent ajouter une marge à un seul côté, comme le haut, le bas, la gauche ou la droite d'un élément particulier.
Ce blog montrera des exemples pour ajouter une marge à un seul côté d'un élément dans Tailwind CSS.
Comment ajouter une marge à un seul côté dans Tailwind ?
Pour ajouter une marge à un seul côté d'un élément dans Tailwind, les classes utilitaires suivantes peuvent être utilisées :
Pour mieux le comprendre, parcourez les exemples ci-dessous.
Exemple 1 : Ajouter une marge en haut d'un élément
Dans cet exemple, nous utiliserons le ' mt-14 ' classe d'utilité dans le ' Sortir Exemple 2 : Ajouter une marge au bas d'un élément Dans cet exemple, nous utiliserons le ' mb-14 'classe dans le' Exemple 3 : Ajouter une marge à gauche d'un élément Dans cet exemple, nous utiliserons le ' ml-14 'classe dans le' Exemple 4 : ajouter une marge à droite d'un élément Dans cet exemple, nous utiliserons le ' mr-14 'classe dans le' Pour ajouter une marge à un seul côté d'un élément dans Tailwind, différentes classes d'utilitaires peuvent être utilisées, telles que ' ml-
< div classe = 'h-96 mt-14 bg-violet-500' >
< p classe = 'texte-5xl centre de texte' > Marge dans CSS vent arrière p >
div >
corps >
Ici:
La sortie ci-dessus montre que la marge a été ajoutée en haut du conteneur.
< div classe = 'h-96 mb-14 bg-violet-500' >
< p classe = 'texte-5xl centre de texte' > Marge dans CSS vent arrière p >
div >
corps >
Sortir 
On peut voir que la marge a été ajoutée au fond du conteneur.
< div classe = 'h-96 ml-14 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 que la marge a été ajoutée à gauche de l'élément conteneur.
< div classe = 'h-96 mr-14 bg-violet-500' >
< p classe = 'texte-5xl centre de texte' > Marge dans CSS vent arrière p >
div >
corps >
Sortir 
Comme vous pouvez le voir, la marge a été efficacement ajoutée à droite du conteneur. Conclusion