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-
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 ' Tailwindis elemendile vertikaalse polsterduse lisamiseks kasutage ' py- Süntaks Näide: vertikaalse polsterduse rakendamine HTML-i elemendile Selles näites kasutame ' py-20 ' kasuliku klass koos ' Tailwindis horisontaalse ja vertikaalse polsterduse lisamiseks px-
< 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?
Siin tähistab 'py' 'y-telge' või 'vertikaalset polsterdust'.
< 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