Hogyan adjunk hozzá vízszintes és függőleges margót hátszélben?

Hogyan Adjunk Hozza Vizszintes Es Fuggoleges Margot Hatszelben



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 '

” elemet vízszintes margó hozzáadásához:



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

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

< elem osztály = 'én-<érték>...' > ... elem >


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.

Példa: Függőleges margó alkalmazása egy HTML elemre

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

” elemet függőleges margó hozzáadásához:

< test >

< 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

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.