W CSS Tailwind a margines służy do kontrolowania odstępów wokół określonego elementu. Dodaje przestrzeń między zastosowanym elementem a otaczającymi go elementami. Tailwind CSS zapewnia zestaw narzędzi marginesów i wartości marginesów, które pozwalają użytkownikom dostosować odstępy wokół pożądanych elementów. Ponadto użytkownicy mogą dodać margines do pojedynczej strony, takiej jak góra, dół, lewa lub prawa danego elementu.
Ten blog pokaże przykłady dodawania marginesu do jednej strony elementu w CSS Tailwind.
Jak dodać margines do jednej strony w Tailwind?
Aby dodać margines do pojedynczej strony elementu w Tailwind, można użyć następujących klas narzędzi:
Aby lepiej to zrozumieć, przejrzyj poniższe przykłady.
Przykład 1: Dodaj margines na górze elementu
W tym przykładzie użyjemy „ mt-14 ” klasa użyteczności w „
< dz klasa = 'h-96 mt-14 bg-fioletowy-500' >
< P klasa = „text-5xl text-center” > Margines W CSS wiatru w tył P >
dz >
ciało >
Tutaj:
-
- “ h-96 ” class ustawia wysokość kontenera na 96 jednostek.
- “ mt-14 ” klasa dotyczy 14 jednostek marginesu na górę kontenera.
- “ bg-fioletowy-500 ” ustawia fioletowy kolor tła kontenera.
Wyjście
Powyższe dane wyjściowe pokazują, że margines został dodany na górze kontenera.Przykład 2: Dodaj margines na dole elementu
W tym przykładzie użyjemy „ mb-14 ”klasa w”
< ciało >”, aby dodać 14 jednostek marginesu na dole:
< dz klasa = 'h-96 mb-14 bg-fioletowy-500' >
< P klasa = „text-5xl text-center” > Margines W CSS wiatru w tył P >
dz >
ciało >
Wyjście
Widać, że margines został dodany na dnie pojemnika.Przykład 3: Dodaj margines z lewej strony elementu
W tym przykładzie użyjemy „ ml-14 ”klasa w”
< ciało >”, aby dodać 14 jednostek marginesu po lewej stronie:
< dz klasa = 'h-96 ml-14 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ą, że margines został dodany po lewej stronie elementu kontenera.Przykład 4: Dodaj margines z prawej strony elementu
W tym przykładzie użyjemy „ pan-14 ”klasa w”
< ciało >”, aby dodać 14 jednostek marginesu po prawej stronie:
< dz klasa = 'h-96 mr-14 bg-fioletowy-500' >
< P klasa = „text-5xl text-center” > Margines W CSS wiatru w tył P >
dz >
ciało >
Wyjście
Jak widać, margines został skutecznie dodany po prawej stronie kontenera.Wniosek
Aby dodać margines do pojedynczej strony elementu w Tailwind, można użyć różnych klas narzędzi, takich jak „ ml-
”, „ pan- ”, „ mt- ', I ' mb- ”. Klasy te dodają margines odpowiednio do lewej, prawej, górnej i dolnej strony określonego elementu. Użytkownicy mogą określić różne wartości rozmiaru marginesu. Na tym blogu przedstawiono przykłady dodawania marginesu do pojedynczej strony elementu w CSS Tailwind.
- “ h-96 ” class ustawia wysokość kontenera