Tailwind CSS pakub ' marginaal ” utiliidiklassid, mis võimaldavad kasutajatel kontrollida elementide vahekaugust. The horisontaalne veeris lisab ruumi elemendi vasakule ja paremale küljele, samas kui a vertikaalne veeris lisab ruumi elemendi üla- ja alaossa. Tailwind pakub erinevaid kasulikkuse klasse, et lisada soovitud elementidele horisontaalsed või vertikaalsed veerised.
See artikkel on näide:
Kuidas lisada taganttuules horisontaalset varu?
Tailwindis elemendile horisontaalse veerise lisamiseks mx-
Süntaks
< element klass = 'mx-
Siin tähistab 'mx' 'x-telge' või 'horisontaalset veerist'. Asendage '
Näide: Horisontaalse veerise rakendamine HTML-i elemendile
Selles näites kasutame ' mx-10 ' kasuliku klass koos ' Tailwindi elemendile vertikaalse veerise lisamiseks kasutage nuppu ' minu- Süntaks Näide: vertikaalse veerise rakendamine HTML-i elemendile Selles näites kasutame ' minu-10 ' kasuliku klass koos ' Tailwindis horisontaalse ja vertikaalse veerise lisamiseks ' mx-
< keha >
< div klass = 'h-screen mx-10 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Väljund
Ülaltoodud väljund näitab veerist konteineri vasakul ja paremal küljel. See näitab, et horisontaalne veeris on konteinerielemendile edukalt rakendatud. Kuidas lisada taganttuules vertikaalset veerist?
Siin tähistab 'minu' 'y-telge' või 'vertikaalset veerist'. Asendage '
< div klass = 'h-96 my-10 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Väljund
Ülaltoodud väljund näitab konteineri ülemise ja alumise külje veerist. See näitab, et vertikaalne veeris on konteinerielemendile tõhusalt rakendatud. Järeldus