Kuinka lisätä vaaka- ja pystysuuntaista pehmustetta myötätuulessa?

Kuinka Lisata Vaaka Ja Pystysuuntaista Pehmustetta Myotatuulessa



Tailwind CSS:ssä pehmuste on tila tietyn elementin sisällön ja sen reunan välillä. Vaakasuora pehmuste on tila elementin vasemmalla ja oikealla puolella, kun taas pystysuora pehmuste on tila elementin ylä- ja alaosassa. Tailwind tarjoaa useita hyödyllisyysluokkia vaaka- tai pystysuoran pehmusteen lisäämiseksi haluttuihin elementteihin.

Tämä artikkeli havainnollistaa:







Kuinka lisätä vaakasuuntaista pehmustetta myötätuuleen?

Vaakasuuntaisen täytön lisäämiseksi Tailwindin elementtiin käytetään luokkaa 'px- ' halutun elementin kanssa HTML-ohjelmassa. Käyttäjät voivat määrittää pehmusteen koolle erilaisia ​​arvoja. Tämä luokka lisää pehmustetta x-akselia pitkin eli sekä elementin vasemmalle että oikealle puolelle.



Syntaksi



< elementti luokkaa = 'px-0...' > ... elementti >


Tässä 'px' edustaa 'x-akselia' tai 'vaakasuuntaista täyttöä'.





Esimerkki: Horisontaalisen täytön käyttäminen HTML-elementissä

Tässä esimerkissä käytämme ' px-20 ' hyötyluokka '

”-elementti lisätäksesi siihen vaakasuuntaisen pehmusteen:



< kehon >

< div luokkaa = 'bg-pink-600 px-20 w-max' >
Pehmuste sisään Tailwind CSS
div >

kehon >


Lähtö


Yllä oleva tulos näyttää säiliön vasemman ja oikean puolen pehmusteen. Tämä osoittaa, että vaakasuora pehmuste on lisätty säiliöelementtiin onnistuneesti.

Kuinka lisätä pystysuora pehmuste Tailwindissä?

Jos haluat lisätä pystysuoran pehmusteen Tailwindin elementtiin, käytä ' py- ” apuluokka tietyllä elementillä HTML-ohjelmassa. Tämä luokka lisää pehmustetta y-akselia pitkin eli sekä elementin ylä- että alapuolelle.

Syntaksi

< elementti luokkaa = 'py-0...' > ... elementti >


Tässä 'py' edustaa 'y-akselia' tai 'pystysuoraa täyttöä'.

Esimerkki: Pystytäytön käyttäminen HTML-elementtiin

Tässä esimerkissä käytämme ' py-20 ' hyötyluokka '

”-elementti lisätäksesi siihen pystysuoran pehmusteen:

< kehon >

< div luokkaa = 'bg-pink-600 py-20 w-max' >
Pehmuste sisään Tailwind CSS
div >

kehon >


Lähtö


Yllä oleva tulos näyttää säiliön ylä- ja alareunan pehmusteen. Tämä osoittaa, että pystysuora pehmuste on levitetty tehokkaasti säiliöelementtiin.

Johtopäätös

Jos haluat lisätä vaaka- ja pystysuoran pehmusteen Tailwindissä, ' px- ' ja ' py- ” hyödyllisyysluokkia käytetään haluttujen elementtien kanssa HTML-ohjelmassa vastaavasti. Käyttäjät voivat määrittää eri arvoja lisätäkseen täyttöä elementin vasemmalle ja oikealle tai ylä- ja alareunalle. Tämä artikkeli on havainnollistanut täydellisen menetelmän käyttää vaaka- ja pystysuoraa pehmustetta Tailwindissä.