Kako dodati vodoravnu i okomitu marginu u Tailwind?

Kako Dodati Vodoravnu I Okomitu Marginu U Tailwind



Tailwind CSS pruža ' margina ” klase korisnih programa koje korisnicima omogućuju kontrolu razmaka oko elemenata. The horizontalna margina dodaje prostor na lijevu i desnu stranu elementa, dok a okomita margina dodaje prostor na vrh i dno elementa. Tailwind nudi različite klase korisnosti za dodavanje vodoravnih ili okomitih margina željenim elementima.

Ovaj članak će ilustrirati sljedeće:







Kako dodati vodoravnu marginu u Tailwind?

Za dodavanje horizontalne margine elementu u Tailwindu, ' mx- ” klasa se koristi sa željenim elementom u HTML programu. Korisnici mogu odrediti različite vrijednosti za veličinu margine. Ova klasa dodaje marginu duž x-osi (desna i lijeva strana).



Sintaksa



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


Ovdje 'mx' predstavlja 'x-os' ili 'horizontalnu marginu'. Svakako zamijenite “” bilo kojom valjanom vrijednošću, kao što je “5”, “14” itd.





Primjer: Primjena vodoravne margine na HTML element

U ovom primjeru koristit ćemo ' mx-10 ' klasa korisnosti s '

” da biste mu dodali vodoravnu marginu:



< tijelo >

< div razreda = 'h-screen mx-10 bg-ljubičasta-500' >

< str razreda = 'text-5xl text-center' > Margina u Stražnji vjetar CSS str >

div >

tijelo >


Izlaz


Gornji izlaz prikazuje marginu s lijeve i desne strane spremnika. To znači da je vodoravna margina uspješno primijenjena na element spremnika.

Kako dodati okomitu marginu u Tailwind?

Za dodavanje okomite margine elementu u Tailwindu, koristite ' moj- ” uslužna klasa s određenim elementom u HTML programu. Ova klasa dodaje marginu duž y-osi (gornja i donja strana).

Sintaksa

< element razreda = 'moja- ...' > ... element >


Ovdje 'moj' predstavlja 'os y' ili 'okomitu marginu'. Obavezno zamijenite “” bilo kojom valjanom vrijednošću, kao što je “6”, “12” itd.

Primjer: Primjena okomite margine na HTML element

U ovom primjeru koristit ćemo ' moj-10 ' klasa korisnosti s '

” da biste mu dodali okomitu marginu:

< tijelo >

< div razreda = 'h-96 moj-10 bg-ljubičasta-500' >

< str razreda = 'text-5xl text-center' > Margina u Stražnji vjetar CSS str >

div >

tijelo >


Izlaz


Gornji izlaz prikazuje marginu gornje i donje strane spremnika. Ovo označava da je okomita margina učinkovito primijenjena na element spremnika.

Zaključak

Za dodavanje vodoravne i okomite margine u Tailwind, ' mx- ' i ' moj- ” klase korisnih programa koriste se sa željenim elementima u HTML programu. Korisnici mogu navesti različite vrijednosti za primjenu margine na lijevo i desno ili na vrh i dno elementa. Ovaj zapis je pokazao primjer metode primjene vodoravnih i okomitih margina u Tailwindu.