A Tailwind CSS-ben párnázás az adott elem tartalma és határa közötti tér. Vízszintes párnázás az elem bal és jobb oldalán lévő tér, míg függőleges párnázás az elem tetején és alján lévő tér. A Tailwind különféle használati osztályokat kínál a kívánt elemek vízszintes vagy függőleges párnázásához.
Ez a cikk bemutatja:
Hogyan adjunk hozzá vízszintes párnázást hátszélben?
A Tailwind egyik elemének vízszintes kitöltéséhez a „px-<érték>” osztályt használjuk a kívánt elemmel a HTML programban. A felhasználók különböző értékeket adhatnak meg a padding méretéhez. Ez az osztály kitöltést ad az x tengely mentén, azaz az elem bal és jobb oldalára is.
Szintaxis
< elem osztály = 'px-0...' > ... elem >
Itt a „px” az „x-tengelyt” vagy a „vízszintes kitöltést” jelenti.
Példa: Vízszintes kitöltés alkalmazása egy HTML-elemre
Ebben a példában a „ px-20 ' használati osztály a ' Ha függőleges kitöltést szeretne hozzáadni egy elemhez a Tailwind alkalmazásban, használja a „ py-<érték> ” segédprogram osztály az adott elemmel a HTML programban. Ez az osztály kitöltést ad az y tengely mentén, azaz az elem felső és alsó oldalához is. Szintaxis Példa: Függőleges kitöltés alkalmazása egy HTML-elemre Ebben a példában a „ py-20 ' használati osztály a ' A vízszintes és függőleges párnázás hozzáadásához a Tailwindben, a „ px-<érték> ” és „ py-<érték> ” segédosztályokat a kívánt elemekkel használjuk a HTML programban. A felhasználók különböző értékeket adhatnak meg, hogy kitöltést alkalmazzanak egy elem bal és jobb oldalára vagy tetejére és aljára. Ez a cikk bemutatja a vízszintes és függőleges párnázás alkalmazásának teljes módszerét a Tailwindben.
< test >
< div osztály = 'bg-pink-600 px-20 w-max' >
Párnázás ban ben Hátszél CSS
div >
test >
Kimenet
A fenti kimenet a tartály bal és jobb oldalán található párnázást mutatja. Ez azt jelzi, hogy a vízszintes kitöltést sikeresen alkalmazta a tárolóelemen. Hogyan lehet függőleges párnázást hozzáadni a hátszélhez?
Itt a „py” az „y-tengelyt” vagy a „függőleges padding”-ot jelenti.
< div osztály = 'bg-pink-600 py-20 w-max' >
Párnázás ban ben Hátszél CSS
div >
test >
Kimenet
A fenti kimenet a tartály felső és alsó oldalának párnázását mutatja. Ez azt jelzi, hogy a függőleges párnázást hatékonyan alkalmazták a tárolóelemen. Következtetés