Tailwind CSS:ssä a marginaali käytetään säätämään tietyn elementin ympärillä olevaa etäisyyttä. Se lisää tilaa käytetyn elementin ja sitä ympäröivien elementtien väliin. Tailwind CSS tarjoaa joukon marginaaliapuohjelmia ja marginaaliarvoja, joiden avulla käyttäjät voivat mukauttaa haluttujen elementtien väliä. Lisäksi käyttäjät voivat lisätä marginaalin yhdelle sivulle, kuten tietyn elementin ylä-, ala-, vasempaan tai oikeaan reunaan.
Tämä blogi näyttää esimerkkejä marginaalin lisäämisestä elementin yhdelle puolelle Tailwind CSS:ssä.
Kuinka lisätä marginaalia yhdelle puolelle myötätuulessa?
Voit lisätä marginaalin elementin yhdelle puolelle Tailwindissä käyttämällä seuraavia hyödyllisyysluokkia:
Ymmärtääksesi sen paremmin, käy läpi alla olevat esimerkit.
Esimerkki 1: Lisää marginaali elementin yläosaan
Tässä esimerkissä käytämme ' mt-14 'hyötyluokka ' Lähtö Esimerkki 2: Lisää marginaali elementin alaosaan Tässä esimerkissä käytämme ' mb-14 'luokassa' Esimerkki 3: Lisää marginaali elementin vasemmalle puolelle Tässä esimerkissä käytämme ' ml-14 'luokassa' Esimerkki 4: Lisää marginaali elementin oikealle puolelle Tässä esimerkissä käytämme ' herra-14 'luokassa' Jos haluat lisätä marginaalin elementin yhdelle puolelle Tailwindissä, voidaan käyttää erilaisia hyödyllisyysluokkia, kuten ' ml-
< div luokkaa = 'h-96 mt-14 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Tässä:
Yllä oleva tulos osoittaa, että marginaali on lisätty säiliön yläosaan.
< div luokkaa = 'h-96 mb-14 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Lähtö
Voidaan nähdä, että marginaali on lisätty säiliön pohjaan.
< div luokkaa = 'h-96 ml-14 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Lähtö
Yllä oleva tulos osoittaa, että marginaali on lisätty säiliöelementin vasemmalle puolelle.
< div luokkaa = 'h-96 mr-14 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Lähtö
Kuten näet, marginaali on lisätty tehokkaasti kontin oikealle puolelle. Johtopäätös