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 ' Näide 2: lisage elemendi alaosale polster Selles näites kasutame ' pb-10 ' klassis ' Näide 3: lisage täidis elemendist paremale Selles näites kasutame ' pr-10 ' klassis ' Näide 4: lisage polsterdus elemendi vasakule Selles näites kasutame ' pl-10 ' klassis ' Tailwindis elemendi ühele küljele polsterduse lisamiseks saab kasutada erinevaid kasulikkuse klasse, näiteks ' pl-
< 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.
< 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.
< 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.
< 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