Hogyan lehet párnázni egy oldalt hátszélben?

Hogyan Lehet Parnazni Egy Oldalt Hatszelben



A Tailwind CSS-ben a kitöltés arra szolgál, hogy helyet adjon az adott elem tartalma és határai között. Extra térközt ad az elem belsejében. A Tailwind CSS kitöltő segédprogramokat és kitöltési értékeket biztosít, amelyek lehetővé teszik a felhasználók számára a kívánt elemek térközének testreszabását. Ezen túlmenően a felhasználók egy oldalt, például egy adott elem felső, alsó, bal vagy jobb oldalát tölthetik fel.

Ez a blog bemutatja azokat a példákat, amelyek segítségével a Tailwind CSS-ben egy elem egyetlen oldalához lehet kitöltést adni.







Hogyan lehet párnázni egy oldalt hátszélben?

Ha a Tailwindben egy elem egyetlen oldalához kitöltést szeretne hozzáadni, a következő segédosztályok használhatók:



A jobb megértéshez tekintse meg az alábbi példákat.



1. példa: Kitöltés hozzáadása egy elem tetejéhez





Ebben a példában a „ pt-10 ' használati osztály a '

” elem 10 egységnyi párnázás hozzáadásához a tetejére:

< test >

< div osztály = 'bg-pink-600 pt-10 w-max' >
Párnázás ban ben Hátszél CSS
div >

test >


Kimenet




A fenti kimenet azt mutatja, hogy a párnázást hozzáadták a tartály tetejéhez.

2. példa: Kitöltés hozzáadása egy elem aljához

Ebben a példában a „ pb-10 ' osztály a '

” elem 10 egységnyi párnázás hozzáadásához az alján:

< test >

< div osztály = 'bg-pink-600 pb-10 w-max' >
Párnázás ban ben Hátszél CSS
div >

test >


Kimenet


Látható, hogy a párnázást hozzáadták a tartály aljához.

3. példa: Kitöltés hozzáadása egy elem jobb oldalán

Ebben a példában a „ pr-10 ' osztály a '

” elemet a jobb oldali 10 egységnyi kitöltés hozzáadásához:

< test >

< div osztály = 'bg-pink-600 pr-10 w-max' >
Párnázás ban ben Hátszél CSS
div >

test >


Kimenet


A fenti kimenet azt mutatja, hogy a padding hozzáadásra került a tárolóelem jobb oldalán.

4. példa: Kitöltés hozzáadása egy elem bal oldalához

Ebben a példában a „ pl-10 ' osztály a '

” elem 10 egységnyi kitöltés hozzáadásához a bal oldalon:

< test >

< div osztály = 'bg-pink-600 pl-10 w-max' >
Párnázás ban ben Hátszél CSS
div >

test >


Kimenet


Megfigyelhető, hogy a párnázás a tartály bal oldalára került.

Következtetés

Ahhoz, hogy a Tailwindben egy elem egyetlen oldalához párnázást adjunk, különféle segédosztályok használhatók, mint pl. pl-<érték> ”, „ pr-<érték> ”, „ pt-<érték> ”, és „ pb-<érték> ”. Ezek az osztályok kitöltést adnak az adott elem bal, jobb, felső és alsó oldalához. A felhasználók különböző értékeket adhatnak meg a padding méretéhez. Ez a blog példákat mutat be a Tailwind CSS-ben egy elem egyetlen oldalának kitöltésére.