Kuidas lisada taganttuules horisontaalset ja vertikaalset polsterdust?

Kuidas Lisada Taganttuules Horisontaalset Ja Vertikaalset Polsterdust



Tailwind CSS-is polsterdus on ruum konkreetse elemendi sisu ja selle piiri vahel. Horisontaalne polsterdus on ruumi elemendi vasakul ja paremal küljel, kusjuures vertikaalne polsterdus on ruumi elemendi üla- ja alaosas. Tailwind pakub erinevaid kasutusklasse, et lisada soovitud elementidele horisontaalset või vertikaalset polsterdust.

See artikkel illustreerib:







Kuidas lisada taganttuules horisontaalset polsterdust?

Tailwindis elemendile horisontaalse polsterduse lisamiseks kasutatakse HTML-programmis soovitud elemendiga klassi “px-”. Kasutajad saavad polstri suuruse jaoks määrata erinevaid väärtusi. See klass lisab polsterduse piki x-telge, st nii elemendi vasakule kui ka paremale küljele.



Süntaks



< element klass = 'px-0 ...' > ... element >


Siin tähistab 'px' 'x-telge' või 'horisontaalset polsterdust'.





Näide: Horisontaalse polsterduse rakendamine HTML-i elemendile

Selles näites kasutame ' px-20 ' kasuliku klass koos '

” element, et lisada sellele horisontaalne polster:



< keha >

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

keha >


Väljund


Ülaltoodud väljund näitab mahuti vasaku ja parema külje polsterdust. See näitab, et horisontaalne polster on konteinerielemendile edukalt rakendatud.

Kuidas lisada vertikaalset polsterdust taganttuules?

Tailwindis elemendile vertikaalse polsterduse lisamiseks kasutage ' py- ” utiliidiklass konkreetse elemendiga HTML-programmis. See klass lisab polsterduse piki y-telge, st nii elemendi ülemisele kui alumisele küljele.

Süntaks

< element klass = 'py-0 ...' > ... element >


Siin tähistab 'py' 'y-telge' või 'vertikaalset polsterdust'.

Näide: vertikaalse polsterduse rakendamine HTML-i elemendile

Selles näites kasutame ' py-20 ' kasuliku klass koos '

” element, et lisada sellele vertikaalne polster:

< keha >

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

keha >


Väljund


Ülaltoodud väljund näitab mahuti ülemise ja alumise külje polsterdust. See näitab, et vertikaalne polster on konteinerielemendile tõhusalt rakendatud.

Järeldus

Tailwindis horisontaalse ja vertikaalse polsterduse lisamiseks px- ” ja „ py- ” utiliidiklasse kasutatakse vastavalt soovitud elementidega HTML-programmis. Kasutajad saavad määrata erinevaid väärtusi, et rakendada polsterdust elemendi vasakule ja paremale või üla- ja alaosale. See artikkel on illustreerinud täielikku meetodit horisontaalse ja vertikaalse polsterduse rakendamiseks Tailwindis.