Kuidas lisada ühele küljele polsterdust taganttuules?

Kuidas Lisada Uhele Kuljele Polsterdust Taganttuules



Tailwind CSS-is kasutatakse täitmist, et lisada ruumi konkreetse elemendi sisu ja selle ääriste vahele. See lisab elemendi sees täiendavat vahekaugust. Tailwind CSS pakub komplekti polsterdusutiliite ja polsterdamisväärtusi, mis võimaldavad kasutajatel soovitud elementide vahekaugusi kohandada. Lisaks saavad kasutajad lisada polsterduse konkreetse elemendi ühele küljele, näiteks üla-, ala-, vasakule või paremale.

See ajaveeb tutvustab näiteid, kuidas lisada Tailwind CSS-i elemendi ühele küljele polster.







Kuidas lisada ühele küljele polsterdust taganttuules?

Tailwindis elemendi ühele küljele polsterduse lisamiseks saab kasutada järgmisi kasulikkuse klasse:



Selle paremaks mõistmiseks vaadake allpool toodud näiteid.



Näide 1: lisage elemendi ülaosale polster





Selles näites kasutame ' pt-10 ' kasuliku klassi '

” element, et lisada selle ülaossa 10 ühikut polsterdust:

< keha >

< div klass = 'bg-roosa-600 pt-10 w-max' >
Polsterdus sisse Tailtuule CSS
div >

keha >


Väljund




Ülaltoodud väljund näitab, et mahuti ülaossa on polster lisatud.

Näide 2: lisage elemendi alaosale polster

Selles näites kasutame ' pb-10 ' klassis '

” element, et lisada selle alaossa 10 ühikut polsterdust:

< keha >

< div klass = 'bg-roosa-600 pb-10 w-max' >
Polsterdus sisse Tailtuule CSS
div >

keha >


Väljund


On näha, et anuma põhja on polsterdus lisatud.

Näide 3: lisage täidis elemendist paremale

Selles näites kasutame ' pr-10 ' klassis '

” element, et lisada selle paremale 10 ühikut polsterdust:

< keha >

< div klass = 'bg-pink-600 pr-10 w-max' >
Polsterdus sisse Tailtuule CSS
div >

keha >


Väljund


Ülaltoodud väljund näitab, et polster on lisatud konteineri elemendist paremale.

Näide 4: lisage polsterdus elemendi vasakule

Selles näites kasutame ' pl-10 ' klassis '

” element, et lisada vasakule 10 ühikut polsterdust:

< keha >

< div klass = 'bg-roosa-600 pl-10 w-max' >
Polsterdus sisse Tailtuule CSS
div >

keha >


Väljund


Võib täheldada, et polster on lisatud konteineri vasakule.

Järeldus

Tailwindis elemendi ühele küljele polsterduse lisamiseks saab kasutada erinevaid kasulikkuse klasse, näiteks ' pl- ”, „ pr- ”, „ pt- ”, ja „ pb- ”. Need klassid lisavad polsterduse vastavalt konkreetse elemendi vasakule, paremale, ülemisele ja alumisele küljele. Kasutajad saavad polstri suuruse jaoks määrata erinevaid väärtusi. See ajaveeb on näidanud näiteid Tailwind CSS-i elemendi ühele küljele polsterduse lisamiseks.