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 ' 2. példa: Kitöltés hozzáadása egy elem aljához Ebben a példában a „ pb-10 ' osztály a ' 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 ' 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 ' 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.
< 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.
< 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.
< 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.
< 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