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-
Sintaxă
< element clasă = 'mx-
Aici, „mx” reprezintă „axa x” sau „marja orizontală”. Asigurați-vă că înlocuiți „
Exemplu: aplicarea unei marje orizontale unui element HTML
În acest exemplu, vom folosi „ mx-10 ” clasa de utilitate cu “ Pentru a adăuga o marjă verticală unui element în Tailwind, utilizați „ mea- Sintaxă Exemplu: aplicarea unei marje verticale unui element HTML În acest exemplu, vom folosi „ meu-10 ” clasa de utilitate cu “ Pentru a adăuga marginea orizontală și verticală în Tailwind, „ mx-
< 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?
Aici, „meu” reprezintă „axa y” sau „marja verticală”. Asigurați-vă că înlocuiți „
< 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