Kaip pridėti paminkštinimą vienoje pusėje esant užpakaliniam vėjui?

Kaip Prideti Paminkstinima Vienoje Puseje Esant Uzpakaliniam Vejui



„Tailwind CSS“ užpildymas naudojamas norint pridėti tarpą tarp konkretaus elemento turinio ir jo kraštų. Tai prideda papildomo tarpo elemento viduje. Tailwind CSS pateikia užpildymo paslaugų ir užpildymo reikšmių rinkinį, leidžiantį vartotojams tinkinti norimų elementų tarpus. Be to, vartotojai gali pridėti užpildymą vienoje konkretaus elemento pusėje, pavyzdžiui, viršuje, apačioje, kairėje arba dešinėje.

Šiame tinklaraštyje bus parodyti pavyzdžiai, kaip pridėti užpildymą vienoje Tailwind CSS elemento pusėje.







Kaip pridėti paminkštinimą vienoje pusėje esant užpakaliniam vėjui?

Norėdami papildyti vieną elemento pusę programoje Tailwind, galima naudoti šias naudingumo klases:



Norėdami tai geriau suprasti, peržiūrėkite toliau pateiktus pavyzdžius.



1 pavyzdys: pridėkite užpildą prie elemento viršaus





Šiame pavyzdyje mes naudosime „ pt-10 'naudingumo klasė'

“ elementą, kad jo viršuje pridėtumėte 10 užpildymo vienetų:

< kūnas >

< div klasė = 'bg-pink-600 pt-10 w-max' >
Paminkštinimas in Tailwind CSS
div >

kūnas >


Išvestis




Aukščiau pateikta išvestis rodo, kad užpildas buvo pridėtas prie konteinerio viršaus.

2 pavyzdys: pridėkite užpildymą elemento apačioje

Šiame pavyzdyje mes naudosime „ pb-10 “ klasė “

“ elementą, kad jo apačioje pridėtumėte 10 užpildymo vienetų:

< kūnas >

< div klasė = 'bg-pink-600 pb-10 w-max' >
Paminkštinimas in Tailwind CSS
div >

kūnas >


Išvestis


Matyti, kad indo dugnas buvo uždėtas kamšalu.

3 pavyzdys: pridėkite užpildymą elemento dešinėje

Šiame pavyzdyje mes naudosime „ pr-10 “ klasė “

“ elementą, kad pridėtumėte 10 užpildymo vienetų dešinėje:

< kūnas >

< div klasė = 'bg-pink-600 pr-10 w-max' >
Paminkštinimas in Tailwind CSS
div >

kūnas >


Išvestis


Aukščiau pateikta išvestis rodo, kad užpildymas buvo pridėtas konteinerio elemento dešinėje.

4 pavyzdys: pridėkite užpildymą elemento kairėje pusėje

Šiame pavyzdyje mes naudosime „ pl-10 “ klasė “

“ elementą, kad pridėtumėte 10 užpildymo vienetų kairėje:

< kūnas >

< div klasė = 'bg-pink-600 pl-10 w-max' >
Paminkštinimas in Tailwind CSS
div >

kūnas >


Išvestis


Galima pastebėti, kad kamšalas buvo pridėtas konteinerio kairėje.

Išvada

Norėdami papildyti vieną elemento pusę programoje Tailwind, galima naudoti įvairias naudingumo klases, pvz. pl- “, „ pr- “, „ pt- “ ir „ pb- “. Šios klasės prideda užpildymą konkretaus elemento kairėje, dešinėje, viršuje ir apačioje. Vartotojai gali nurodyti skirtingas užpildo dydžio reikšmes. Šiame tinklaraštyje pateikti pavyzdžiai, kaip pridėti užpildymą vienoje Tailwind CSS elemento pusėje.