Kuinka lisätä vaaka- ja pystymarginaali myötätuulessa?

Kuinka Lisata Vaaka Ja Pystymarginaali Myotatuulessa



Tailwind CSS tarjoaa ' marginaali ” hyödyllisyysluokat, joiden avulla käyttäjät voivat hallita elementtien väliä. The vaakamarginaali lisää tilaa elementin vasemmalle ja oikealle puolelle, kun taas a pystymarginaali lisää tilaa elementin ylä- ja alaosaan. Tailwind tarjoaa useita hyödyllisyysluokkia vaaka- tai pystyreunojen lisäämiseksi haluttuihin elementteihin.

Tämä artikkeli on esimerkki:







Kuinka lisätä vaakasuora marginaali myötätuulessa?

Jos haluat lisätä vaakamarginaalin Tailwindin elementtiin, ' mx- ” luokkaa käytetään halutun elementin kanssa HTML-ohjelmassa. Käyttäjät voivat määrittää marginaalin koolle erilaisia ​​arvoja. Tämä luokka lisää marginaalin x-akselille (oikealle ja vasemmalle puolelle).



Syntaksi



< elementti luokkaa = 'mx- ...' > ... elementti >


Tässä 'mx' edustaa 'x-akselia' tai 'vaakamarginaalia'. Muista korvata ' ' millä tahansa kelvollisella arvolla, kuten '5', '14' jne.





Esimerkki: Vaakamarginaalin käyttäminen HTML-elementtiin

Tässä esimerkissä käytämme ' mx-10 ' hyötyluokka '

”-elementti lisätäksesi siihen vaakamarginaalin:



< kehon >

< div luokkaa = 'h-screen mx-10 bg-purple-500' >

< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >

div >

kehon >


Lähtö


Yllä oleva tulos näyttää marginaalin säiliön vasemmalla ja oikealla puolella. Tämä osoittaa, että vaakamarginaali on lisätty säiliöelementtiin onnistuneesti.

Kuinka lisätä pystysuuntainen marginaali myötätuulessa?

Voit lisätä pystyreunuksen Tailwindin elementtiin käyttämällä ' minun- ” apuluokka tietyllä elementillä HTML-ohjelmassa. Tämä luokka lisää marginaalin y-akselille (ylä- ja alasivut).

Syntaksi

< elementti luokkaa = 'minun- ...' > ... elementti >


Tässä 'my' edustaa 'y-akselia' tai 'pystymarginaalia'. Muista korvata ' ' millä tahansa kelvollisella arvolla, kuten '6', '12' jne.

Esimerkki: Pystymarginaalin käyttäminen HTML-elementissä

Tässä esimerkissä käytämme ' minun-10 ' hyötyluokka '

” -elementti lisätäksesi siihen pystymarginaalin:

< kehon >

< div luokkaa = 'h-96 my-10 bg-purple-500' >

< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >

div >

kehon >


Lähtö


Yllä oleva tulos näyttää marginaalin säiliön ylä- ja alapuolelle. Tämä osoittaa, että pystymarginaali on käytetty tehokkaasti säiliöelementissä.

Johtopäätös

Lisää vaaka- ja pystymarginaali Tailwindissä ' mx- ' ja ' minun- ” hyödyllisyysluokkia käytetään haluttujen elementtien kanssa HTML-ohjelmassa vastaavasti. Käyttäjät voivat määrittää eri arvoja lisätäkseen marginaalin elementin vasemmalle ja oikealle tai ylä- ja alareunalle. Tämä kirjoitus on esimerkki menetelmästä käyttää vaaka- ja pystyreunuksia Tailwindissä.