Hogyan adjunk hozzá vízszintes és függőleges párnázást hátszélben?

Hogyan Adjunk Hozza Vizszintes Es Fuggoleges Parnazast Hatszelben



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 '

” elemet a vízszintes kitöltés hozzáadásához:



< 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?

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

< elem osztály = 'py-0...' > ... elem >


Itt a „py” az „y-tengelyt” vagy a „függőleges padding”-ot jelenti.

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 '

” elemet a függőleges kitöltés hozzáadásához:

< test >

< 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

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.