Cum să adăugați o marjă orizontală și verticală în Tailwind?

Cum Sa Adaugati O Marja Orizontala Si Verticala In Tailwind



Tailwind CSS oferă „ marginea ” clase de utilitate care permit utilizatorilor să controleze distanța în jurul elementelor. The marginea orizontală adaugă spațiu în partea stângă și dreaptă a unui element, în timp ce a marginea verticală adaugă spațiu în partea de sus și de jos a unui element. Tailwind oferă diverse clase de utilitate pentru a adăuga margini orizontale sau verticale elementelor dorite.

Acest articol va exemplifica:







Cum să adăugați o marjă orizontală în Tailwind?

Pentru a adăuga o marjă orizontală unui element din Tailwind, „ mx- ” se folosește cu elementul dorit în programul HTML. Utilizatorii pot specifica diferite valori pentru dimensiunea marjei. Această clasă adaugă o marjă de-a lungul axei x (partea dreaptă și stângă).



Sintaxă



< element clasă = 'mx- ...' > ... element >


Aici, „mx” reprezintă „axa x” sau „marja orizontală”. Asigurați-vă că înlocuiți „” cu orice valoare validă, cum ar fi „5”, „14” etc.





Exemplu: aplicarea unei marje orizontale unui element HTML

În acest exemplu, vom folosi „ mx-10 ” clasa de utilitate cu “

” element pentru a adăuga o marjă orizontală:



< corp >

< div clasă = „h-screen mx-10 bg-violet-500” >

< p clasă = „text-5xl text-center” > Marja în Tailwind CSS p >

div >

corp >


Ieșire


Ieșirea de mai sus arată marginea din stânga și din dreapta containerului. Aceasta indică faptul că marginea orizontală a fost aplicată cu succes elementului container.

Cum să adăugați o marjă verticală în Tailwind?

Pentru a adăuga o marjă verticală unui element în Tailwind, utilizați „ mea- ” clasă de utilitate cu elementul specific din programul HTML. Această clasă adaugă o marjă de-a lungul axei y (partea superioară și inferioară).

Sintaxă

< element clasă = 'mea- ...' > ... element >


Aici, „meu” reprezintă „axa y” sau „marja verticală”. Asigurați-vă că înlocuiți „” cu orice valoare validă, cum ar fi „6”, „12” etc.

Exemplu: aplicarea unei marje verticale unui element HTML

În acest exemplu, vom folosi „ meu-10 ” clasa de utilitate cu “

” element pentru a adăuga o marjă verticală:

< corp >

< div clasă = „h-96 my-10 bg-violet-500” >

< p clasă = „text-5xl text-center” > Marja în Tailwind CSS p >

div >

corp >


Ieșire


Ieșirea de mai sus arată marginea din partea de sus și de jos a containerului. Acest lucru indică faptul că marginea verticală a fost aplicată efectiv elementului container.

Concluzie

Pentru a adăuga marginea orizontală și verticală în Tailwind, „ mx- ' și ' mea- ” clasele de utilitate sunt folosite cu elementele dorite în programul HTML respectiv. Utilizatorii pot specifica diferite valori pentru a aplica marginea la stânga și la dreapta sau în partea de sus și de jos a unui element. Acest articol a exemplificat metoda de aplicare a marginilor orizontale și verticale în Tailwind.