A Tailwind CSS biztosítja árrés ” segédprogram osztályok, amelyek lehetővé teszik a felhasználók számára, hogy szabályozzák az elemek közötti távolságot. A vízszintes margó helyet ad egy elem bal és jobb oldalához, míg a függőleges margó helyet ad egy elem tetejéhez és aljához. A Tailwind különféle használati osztályokat kínál, amelyek vízszintes vagy függőleges margókat adnak a kívánt elemekhez.
Ez a cikk példákat mutat be:
Hogyan adjunk hozzá vízszintes margót hátszélben?
Ha vízszintes margót szeretne hozzáadni egy elemhez a Tailwind alkalmazásban, a „ mx-<é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 margó méretéhez. Ez az osztály margót ad az x tengely mentén (jobb és bal oldal).
Szintaxis
< elem osztály = 'mx-<érték> ...' > ... elem >
Itt az „mx” az „x tengelyt” vagy „vízszintes margót” jelöli. Győződjön meg arról, hogy az „<érték>” értéket bármilyen érvényes értékre cseréli, például „5”, „14” stb.
Példa: Vízszintes margó alkalmazása egy HTML-elemre
Ebben a példában a „ mx-10 ' használati osztály a ' Ha függőleges margót szeretne hozzáadni egy elemhez a Tailwind alkalmazásban, használja a „ én-<érték> ” segédprogram osztály az adott elemmel a HTML programban. Ez az osztály margót ad az y tengely mentén (felső és alsó oldal). Szintaxis Példa: Függőleges margó alkalmazása egy HTML elemre Ebben a példában a „ én-10 ' használati osztály a ' A Tailwindben a vízszintes és függőleges margó hozzáadásához a „ mx-<érték> ” és „ én-<é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 margót alkalmazzanak egy elem bal és jobb oldalára vagy tetejére és aljára. Ez az írás példát mutatott a vízszintes és függőleges margók alkalmazásának módszerére a Tailwindben.
< test >
< div osztály = 'h-screen mx-10 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 a margót mutatja a tároló bal és jobb oldalán. Ez azt jelzi, hogy a vízszintes margót sikeresen alkalmazta a tárolóelemre. Hogyan adjunk hozzá függőleges margót hátszélben?
Itt a „my” az „y-tengelyt” vagy a „függőleges margót” jelenti. Győződjön meg arról, hogy az „<érték>” értéket bármilyen érvényes értékre cseréli, például „6”, „12” stb.
< div osztály = 'h-96 my-10 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 a margót mutatja a tároló felső és alsó oldalán. Ez azt jelzi, hogy a függőleges margót hatékonyan alkalmazták a tárolóelemen. Következtetés