Kuinka lisätä marginaalia yhdelle puolelle myötätuulessa?

Kuinka Lisata Marginaalia Yhdelle Puolelle Myotatuulessa



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 '

” -elementti lisää 14 marginaaliyksikköä sen yläosaan:

< kehon >

< 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ä:



    • ' h-96 ” luokka asettaa
      -kontin korkeudeksi 96 yksikköä.
    • ' mt-14 ” luokka soveltaa 14 yksikköä marginaalia kontin yläosaan.
    • ' bg-violetti-500 ” luokka asettaa purppuran värin säiliön taustalle.

Lähtö


Yllä oleva tulos osoittaa, että marginaali on lisätty säiliön yläosaan.

Esimerkki 2: Lisää marginaali elementin alaosaan

Tässä esimerkissä käytämme ' mb-14 'luokassa'

” -elementti lisää 14 marginaaliyksikköä sen alaosaan:

< kehon >

< 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.

Esimerkki 3: Lisää marginaali elementin vasemmalle puolelle

Tässä esimerkissä käytämme ' ml-14 'luokassa'

” -elementti lisätäksesi 14 marginaaliyksikköä sen vasemmalle puolelle:

< kehon >

< 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.

Esimerkki 4: Lisää marginaali elementin oikealle puolelle

Tässä esimerkissä käytämme ' herra-14 'luokassa'

” -elementti lisää 14 marginaaliyksikköä sen oikealle puolelle:

< kehon >

< 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

Jos haluat lisätä marginaalin elementin yhdelle puolelle Tailwindissä, voidaan käyttää erilaisia ​​hyödyllisyysluokkia, kuten ' ml- ”, “ mr- ”, “ mt- ”, ja ” mb- ”. Nämä luokat lisäävät marginaalin tietyn elementin vasemmalle, oikealle, ylä- ja alapuolelle. Käyttäjät voivat määrittää marginaalin koolle erilaisia ​​arvoja. Tämä blogi on osoittanut esimerkkejä marginaalin lisäämisestä elementin yhdelle puolelle Tailwind CSS:ssä.