W CSS Tailwind, wyściółka to przestrzeń między zawartością określonego elementu a jego obramowaniem. Wyściółka pozioma to przestrzeń po lewej i prawej stronie elementu, natomiast wypełnienie pionowe to przestrzeń na górze i na dole elementu. Tailwind oferuje różne klasy użyteczności, aby dodać poziome lub pionowe wypełnienie do pożądanych elementów.
Ten artykuł zilustruje:
Jak dodać poziome wypełnienie w Tailwind?
Aby dodać poziome wypełnienie do elementu w Tailwind, używana jest klasa „px-
Składnia
< element klasa = 'px-0...' > ... element >
Tutaj „px” reprezentuje „oś x” lub „wypełnienie poziome”.
Przykład: zastosowanie dopełnienia poziomego do elementu HTML
W tym przykładzie użyjemy „ px-20 ” klasa użyteczności z „
< ciało >
< dz klasa = 'bg-pink-600 px-20 w-max' >
Wyściółka W CSS wiatru w tył
dz >
ciało >
Wyjście
Powyższe dane wyjściowe pokazują dopełnienie po lewej i prawej stronie kontenera. Oznacza to, że poziome wypełnienie zostało pomyślnie zastosowane do elementu kontenera.
Jak dodać pionowe wypełnienie w Tailwind?
Aby dodać pionowe wypełnienie do elementu w Tailwind, użyj „ py-
Składnia
< element klasa = 'py-0...' > ... element >
Tutaj „py” reprezentuje „oś y” lub „wypełnienie pionowe”.
Przykład: Stosowanie wypełnienia pionowego do elementu HTML
W tym przykładzie użyjemy „ py-20 ” klasa użyteczności z „
< dz klasa = 'bg-pink-600 py-20 w-max' >
Wyściółka W CSS wiatru w tył
dz >
ciało >
Wyjście
Powyższe dane wyjściowe pokazują dopełnienie górnej i dolnej strony kontenera. Wskazuje to, że pionowe wypełnienie zostało skutecznie zastosowane do elementu pojemnika.
Wniosek
Aby dodać poziome i pionowe wypełnienie w Tailwind, „ px-