Kako dodati marginu jednoj strani u Tailwindu?

Kako Dodati Marginu Jednoj Strani U Tailwindu



U Tailwind CSS-u, a margina koristi se za kontrolu razmaka oko određenog elementa. Dodaje prostor između primijenjenog elementa i okolnih elemenata. Tailwind CSS pruža skup pomoćnih programa za margine i vrijednosti margina koje korisnicima omogućuju prilagodbu razmaka oko željenih elemenata. Štoviše, korisnici mogu dodati marginu na jednu stranu, kao što je vrh, dno, lijevo ili desno od određenog elementa.

Ovaj će blog pokazati primjere dodavanja margine jednoj strani elementa u Tailwind CSS-u.





Kako dodati marginu jednoj strani u Tailwindu?

Za dodavanje margine jednoj strani elementa u Tailwindu, mogu se koristiti sljedeće klase korisnosti:



Da biste to bolje razumjeli, prođite kroz dolje navedene primjere.



Primjer 1: Dodajte marginu na vrh elementa



U ovom primjeru koristit ćemo ' mt-14 ' klasa korisnosti u '

” za dodavanje 14 jedinica margine na njegov vrh:

< tijelo >

< div razreda = 'h-96 mt-14 bg-ljubičasta-500' >

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

div >

tijelo >


Ovdje:



    • “ h-96 ” klasa postavlja visinu
      spremnika na 96 jedinica.
    • “ mt-14 ” klasa primjenjuje 14 jedinica margine na vrh spremnika.
    • “ bg-ljubičasta-500 ” klasa postavlja ljubičastu boju na pozadinu spremnika.

Izlaz


Gornji izlaz pokazuje da je margina dodana na vrh spremnika.

Primjer 2: Dodajte marginu na dno elementa

U ovom primjeru koristit ćemo ' mb-14 ' razred u '

” za dodavanje 14 jedinica margine na njegovo dno:

< tijelo >

< div razreda = 'h-96 mb-14 bg-ljubičasta-500' >

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

div >

tijelo >


Izlaz


Može se vidjeti da je margina dodana na dno spremnika.

Primjer 3: Dodajte marginu s lijeve strane elementa

U ovom primjeru koristit ćemo ' ml-14 ' razred u '

” za dodavanje 14 jedinica margine s lijeve strane:

< tijelo >

< div razreda = 'h-96 ml-14 bg-ljubičasta-500' >

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

div >

tijelo >


Izlaz


Gornji izlaz pokazuje da je margina dodana lijevo od elementa spremnika.

Primjer 4: Dodajte marginu s desne strane elementa

U ovom primjeru koristit ćemo ' mr-14 ' razred u '

” za dodavanje 14 jedinica margine s njegove desne strane:

< tijelo >

< div razreda = 'h-96 mr-14 bg-ljubičasta-500' >

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

div >

tijelo >


Izlaz


Kao što vidite, margina je učinkovito dodana desnoj strani spremnika.

Zaključak

Da biste dodali marginu jednoj strani elementa u Tailwindu, mogu se koristiti različite klase korisnosti, kao što je ' ml- ”, “ mr- ”, “ mt- ', i ' mb- ”. Ove klase dodaju marginu lijevoj, desnoj, gornjoj i donjoj strani određenog elementa. Korisnici mogu odrediti različite vrijednosti za veličinu margine. Ovaj blog pokazao je primjere dodavanja margine jednoj strani elementa u Tailwind CSS-u.

ostalo

Kategorija

Popularni Postovi

Stvorite Git zakrpu iz neizvršenih promjena u trenutnom radnom direktoriju

Kako koristiti verziju Discorda za stolno računalo na mobilnom telefonu

Kako koristiti unsigned char u C-u s primjerima

Kako koristiti statičke pomoćne programe u Tailwindu?

Kako instalirati CLion IDE na Fedora Linux

Kako deinstalirati Git u sustavu Windows

Booleov tip C++

Kako instalirati cPanel WHM na CentOS 7

Kako koristiti funkciju date_modify() u PHP-u

I C++

Kako provjeriti verziju Network Managera na Debianu

SQL RTRIM()

Kako riješiti problem s potvrdom u 2 koraka na Robloxu

Pandas Prikaži maksimalni broj redaka

Kako raditi s privatnim ograncima javnih repozitorija?

Kako igrati Roblox na Chromebooku

Kako snimiti ekran na Windows 11

Kako izraditi formate predložaka u LangChainu?

Što doista radi opcija “–net=host” u naredbi Docker?

Kako ponovno pokrenuti Apache HTTPD na Ubuntu 22.04