Kuidas lisada taganttuules horisontaalset ja vertikaalset marginaali?

Kuidas Lisada Taganttuules Horisontaalset Ja Vertikaalset Marginaali



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- ” klassi kasutatakse koos soovitud elemendiga HTML-programmis. Kasutajad saavad määrata veerise suuruse jaoks erinevaid väärtusi. See klass lisab veerise piki x-telge (parem ja vasak pool).



Süntaks



< element klass = 'mx- ...' > ... element >


Siin tähistab 'mx' 'x-telge' või 'horisontaalset veerist'. Asendage '' mis tahes kehtiva väärtusega, näiteks '5', '14' jne.





Näide: Horisontaalse veerise rakendamine HTML-i elemendile

Selles näites kasutame ' mx-10 ' kasuliku klass koos '

” element, et lisada sellele horisontaalne veeris:



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

Tailwindi elemendile vertikaalse veerise lisamiseks kasutage nuppu ' minu- ” utiliidiklass konkreetse elemendiga HTML-programmis. See klass lisab veerise piki y-telge (ülemine ja alumine külg).

Süntaks

< element klass = 'minu- ...' > ... element >


Siin tähistab 'minu' 'y-telge' või 'vertikaalset veerist'. Asendage '' mis tahes kehtiva väärtusega, näiteks '6', '12' jne.

Näide: vertikaalse veerise rakendamine HTML-i elemendile

Selles näites kasutame ' minu-10 ' kasuliku klass koos '

” element, et lisada sellele vertikaalne veeris:

< keha >

< 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

Tailwindis horisontaalse ja vertikaalse veerise lisamiseks ' mx- ” ja „ minu- ” utiliidiklasse kasutatakse vastavalt soovitud elementidega HTML-programmis. Kasutajad saavad määrata elemendi vasakule ja paremale või üla- ja alaosale veerise rakendamiseks erinevaid väärtusi. See kirjeldus on näide horisontaalsete ja vertikaalsete veeriste rakendamisest Tailwindis.