W CSS Tailwinda „ przestrzeń pomiędzy ” narzędzia służą do kontrolowania przestrzeni pomiędzy elementami podrzędnymi kontenerów elastycznych lub siatkowych. Oferuje różne klasy, takie jak „space-x-
W tym przewodniku przedstawiono przykładową metodę użycia ujemnej wartości spacji w Tailwind.
Jak używać ujemnej wartości spacji w Tailwind?
Aby użyć ujemnej wartości spacji w Tailwind, najpierw utwórz strukturę HTML. Następnie użyj myślnika „ – ” z żądaną „spacją pomiędzy” klasami użyteczności, aby przekonwertować ją na wartość ujemną. „ -space-x-
Przeanalizujmy poniższe przykłady, aby lepiej to zrozumieć.
Przykład 1: Zastosuj ujemne odstępy poziome pomiędzy elementami
W tym przykładzie mamy elastyczny kontener z kilkoma elementami podrzędnymi w rzędzie. Będziemy używać „ -spacja-x-8 ”, aby zastosować ujemne odstępy poziome pomiędzy elementami elastycznymi:
< ciało >< div klasa = 'flex -space-x-8 m-10 h-20 w-max' >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klasa = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
ciało >
Tutaj, w elemencie nadrzędnym
-
- „ przewód ” tworzy elastyczny układ.
- „ -spacja-x-8 ” klasa dodaje 8 jednostek ujemnego odstępu poziomego pomiędzy elementami elastycznymi w kontenerze.
- „ m-10 ” dodaje margines 10 jednostek ze wszystkich stron kontenera.
- „ godz-20 ” ustawia wysokość kontenera na 20 jednostek.
- „ w-maks ” ustawia szerokość kontenera na maksymalną szerokość zawartości.
W elementach potomnych
-
- „ bg-teal-500 ” ustawia tło elementów elastycznych na kolor turkusowy.
- „ w-20 ” ustawia szerokość każdego elementu elastycznego na 20 jednostek.
- „ p-5 ” klasa dodaje 5 jednostek wypełnienia ze wszystkich stron każdego elementu elastycznego.
- „ granica-2 ” ustawia szerokość obramowania kontenera na 2 jednostki.
- „ granica-turkusowa-800 ” klasa nakłada na obramowanie kolor turkusowy.
Wyjście
Powyższe dane wyjściowe pokazują, że elementy elastyczne zachodzą na siebie. Oznacza to, że pomyślnie zastosowano ujemną wartość odstępu poziomego.
Przykład 2: Zastosuj ujemne odstępy pionowe pomiędzy elementami
W tym przykładzie mamy elastyczny kontener z kilkoma elementami podrzędnymi w kolumnie. Będziemy używać „ -space-y-7 ”, aby zastosować ujemne odstępy pionowe pomiędzy elementami elastycznymi:
< ciało >< div klasa = „flex flex-col -space-y-7 m-10 centrum tekstowe” >
< div klasa = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klasa = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klasa = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klasa = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
ciało >
Tutaj:
-
- „ przewód ” tworzy elastyczny układ.
- „ flex-kol ” wyrównuje elementy elastyczne w kierunku pionowym.
- „ -spacja-y-5 ” klasa dodaje 7 jednostek ujemnego odstępu pionowego pomiędzy elementami elastycznymi w kontenerze.
- „ m-10 ” dodaje margines 10 jednostek ze wszystkich stron kontenera.
- „ centrum tekstowe ” wyrównuje tekst kontenera do środka.
Wyjście
Można zauważyć, że elementy elastyczne zachodzą na siebie. Oznacza to, że pomyślnie zastosowano ujemną wartość odstępu pionowego.
Wniosek
Aby użyć ujemnej wartości spacji w Tailwind, użyj „ -space-x-