CSS Tailwind zapewnia „ margines ” klasy użytkowe, które umożliwiają użytkownikom kontrolę rozstawu elementów. The margines poziomy dodaje spację po lewej i prawej stronie elementu, podczas gdy a margines pionowy dodaje miejsce na górze i dole elementu. Tailwind oferuje różne klasy użyteczności, aby dodać poziome lub pionowe marginesy do pożądanych elementów.
Ten artykuł będzie przykładem:
Jak dodać margines poziomy w Tailwind?
Aby dodać poziomy margines do elementu w Tailwind, „ mx-
Składnia
< element klasa = 'mx-
Tutaj „mx” reprezentuje „oś x” lub „margines poziomy”. Pamiętaj, aby zastąpić „
Przykład: zastosowanie marginesu poziomego do elementu HTML
W tym przykładzie użyjemy „ mx-10 ” klasa użyteczności z „
< ciało >
< dz klasa = 'h-ekran MX-10 bg-fioletowy-500' >
< P klasa = „text-5xl text-center” > Margines W CSS wiatru w tył P >
dz >
ciało >
Wyjście
Powyższe dane wyjściowe pokazują margines po lewej i prawej stronie kontenera. Oznacza to, że margines poziomy został pomyślnie zastosowany do elementu kontenera.
Jak dodać pionowy margines w Tailwind?
Aby dodać pionowy margines do elementu w Tailwind, użyj „ moja-
Składnia
< element klasa = 'mój-
Tutaj „my” reprezentuje „oś y” lub „margines pionowy”. Pamiętaj, aby zastąpić „
Przykład: zastosowanie marginesu pionowego do elementu HTML
W tym przykładzie użyjemy „ mój-10 ” klasa użyteczności z „
< dz klasa = 'h-96 my-10 bg-fioletowy-500' >
< P klasa = „text-5xl text-center” > Margines W CSS wiatru w tył P >
dz >
ciało >
Wyjście
Powyższe dane wyjściowe pokazują margines do górnej i dolnej strony kontenera. Oznacza to, że margines pionowy został skutecznie zastosowany do elementu kontenera.
Wniosek
Aby dodać poziomy i pionowy margines w Tailwind, „ mx-