I Tailwind CSS, en margen bruges til at styre afstanden omkring det specifikke element. Det tilføjer plads mellem det anvendte element og dets omgivende elementer. Tailwind CSS leverer et sæt af marginværktøjer og marginværdier, der giver brugerne mulighed for at tilpasse afstanden omkring de ønskede elementer. Desuden kan brugere tilføje en margen til en enkelt side, såsom toppen, bunden, venstre eller højre for et bestemt element.
Denne blog vil demonstrere eksempler på at tilføje margen til en enkelt side af et element i Tailwind CSS.
Hvordan tilføjes margen til en enkelt side i medvind?
For at tilføje margen til en enkelt side af et element i Tailwind, kan følgende hjælpeklasser bruges:
For at forstå det bedre, gennemgå nedenstående eksempler.
Eksempel 1: Tilføj margen til toppen af et element
I dette eksempel vil vi bruge ' mt-14 ' brugsklasse i ' Produktion Eksempel 2: Tilføj margen til bunden af et element I dette eksempel vil vi bruge ' mb-14 ' klasse i ' Eksempel 3: Tilføj margen til venstre for et element I dette eksempel vil vi bruge ' ml-14 ' klasse i ' Eksempel 4: Tilføj margen til højre for et element I dette eksempel vil vi bruge ' mr-14 ' klasse i ' For at tilføje margen til en enkelt side af et element i Tailwind, kan forskellige hjælpeklasser bruges, såsom ' ml-
< div klasse = 'h-96 mt-14 bg-lilla-500' >
< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >
div >
legeme >
Her:
Ovenstående output viser, at marginen er blevet tilføjet til toppen af beholderen.
< div klasse = 'h-96 mb-14 bg-lilla-500' >
< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >
div >
legeme >
Produktion
Det kan ses, at margenen er tilføjet til beholderens bund.
< div klasse = 'h-96 ml-14 bg-lilla-500' >
< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >
div >
legeme >
Produktion
Ovenstående output viser, at marginen er tilføjet til venstre for beholderelementet.
< div klasse = 'h-96 mr-14 bg-lilla-500' >
< s klasse = 'text-5xl tekstcenter' > Margin i Medvind CSS s >
div >
legeme >
Produktion
Som du kan se, er margenen effektivt blevet tilføjet til højre på beholderen. Konklusion