A Tailwind CSS-ben a árrés az adott elem körüli távolság szabályozására szolgál. Helyet ad az alkalmazott elem és a környező elemei közé. A Tailwind CSS margó segédprogramokat és margóértékeket biztosít, amelyek lehetővé teszik a felhasználók számára, hogy testreszabják a kívánt elemek közötti távolságot. Ezenkívül a felhasználók margót adhatnak egy adott elem egyetlen oldalához, például egy adott elem tetejéhez, aljához, baljához vagy jobbjához.
Ez a blog példákat mutat be arra, hogyan lehet margót adni egy elem egyetlen oldalához a Tailwind CSS-ben.
Hogyan adjunk margót egy oldalhoz hátszélben?
Ha margót szeretne hozzáadni egy elem egyetlen oldalához a Tailwind programban, a következő hasznossági osztályok használhatók:
A jobb megértéshez nézze át az alábbi példákat.
1. példa: Margó hozzáadása egy elem tetejéhez
Ebben a példában a „ mt-14 ' használati osztály a ' Kimenet 2. példa: Margó hozzáadása egy elem aljához Ebben a példában a „ mb-14 ' osztály a ' 3. példa: Margó hozzáadása egy elem bal oldalához Ebben a példában a „ ml-14 ' osztály a ' 4. példa: Margó hozzáadása egy elem jobb oldalán Ebben a példában a „ Mr-14 ' osztály a ' Ha egy elem egyetlen oldalához margót szeretne hozzáadni a Tailwind programban, különféle hasznossági osztályok használhatók, mint például ' ml-<érték> ”, „ mr-<érték> ”, „ mt-<érték> ”, és „ mb-<érték> ”. Ezek az osztályok margót adnak az adott elem bal, jobb, felső és alsó oldalához. A felhasználók különböző értékeket adhatnak meg a margó méretéhez. Ez a blog példákat mutat be arra, hogyan lehet margót adni egy elem egyetlen oldalához a Tailwind CSS-ben.
< div osztály = 'h-96 mt-14 bg-purple-500' >
< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >
div >
test >
Itt:
A fenti kimenet azt mutatja, hogy a margó hozzáadásra került a tároló tetejéhez.
< div osztály = 'h-96 mb-14 bg-purple-500' >
< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >
div >
test >
Kimenet
Látható, hogy a margót hozzáadták a tartály aljához.
< div osztály = 'h-96 ml-14 bg-purple-500' >
< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >
div >
test >
Kimenet
A fenti kimenet azt mutatja, hogy a margó hozzáadásra került a tárolóelem bal oldalán.
< div osztály = 'h-96 mr-14 bg-purple-500' >
< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >
div >
test >
Kimenet
Amint látja, a margót hatékonyan hozzáadták a tároló jobb oldalához. Következtetés