U Tailwind CSS-u, ' razmak između ” pomoćni programi koriste se za kontrolu prostora između podređenih elemenata flex ili grid spremnika. Nudi različite klase, kao što su “razmak-x-
Ovaj će vodič pokazati primjer metode korištenja negativne vrijednosti prostora u Tailwindu.
Kako koristiti negativnu vrijednost prostora u Tailwindu?
Za korištenje negativne vrijednosti prostora u Tailwindu, prvo napravite HTML strukturu. Zatim upotrijebite crticu ' – ” sa željenim “razmakom između” klasa korisnosti za pretvaranje u negativnu vrijednost. ' -razmak-x-
Prođimo kroz primjere u nastavku da bismo to bolje razumjeli.
Primjer 1: Primijenite negativni vodoravni razmak između elemenata
U ovom primjeru imamo fleksibilni spremnik s nekoliko podređenih elemenata u nizu. Koristit ćemo ' -razmak-x-8 ” za primjenu negativnog horizontalnog razmaka između savitljivih elemenata:
< tijelo >< div razreda = 'flex -space-x-8 m-10 h-20 w-max' >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div razreda = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
tijelo >
Ovdje, u roditeljskom elementu
-
- “ savijati ” klasa stvara fleksibilan izgled.
- “ -razmak-x-8 ” klasa dodaje 8 jedinica negativnog horizontalnog razmaka između savitljivih elemenata unutar spremnika.
- “ m-10 ” klasa dodaje marginu od 10 jedinica na sve strane spremnika.
- “ h-20 ” klasa postavlja visinu spremnika na 20 jedinica.
- “ w-maks ” postavlja širinu spremnika na najveću širinu sadržaja.
U podređenim
-
- “ bg-teal-500 ” klasa postavlja pozadinu savitljivih elemenata na tamnoplavu.
- “ w-20 ” klasa postavlja širinu svake fleksibilne stavke na 20 jedinica.
- “ p-5 ” klasa dodaje 5 jedinica podloge na sve strane svake fleksibilne stavke.
- “ granica-2 ” klasa postavlja širinu ruba spremnika na 2 jedinice.
- “ border-teal-800 ” klasa primjenjuje plavozelenu boju na rub.
Izlaz
Gornji rezultat pokazuje da se savitljivi elementi preklapaju. To znači da je vrijednost negativnog horizontalnog razmaka uspješno primijenjena.
Primjer 2: Primjena negativnog vertikalnog razmaka između elemenata
U ovom primjeru imamo fleksibilni spremnik s nekim podređenim elementima u stupcu. Koristit ćemo ' -razmak-y-7 ” za primjenu negativnog okomitog razmaka između savitljivih elemenata:
< tijelo >< div razreda = 'flex flex-col -space-y-7 m-10 text-center' >
< div razreda = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div razreda = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div razreda = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div razreda = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
tijelo >
Ovdje:
-
- “ savijati ” klasa stvara fleksibilan izgled.
- “ savitljiva boja ” klasa poravnava flex stavke u okomitom smjeru.
- “ -razmak-y-5 ” klasa dodaje 7 jedinica negativnog vertikalnog razmaka između savitljivih elemenata unutar spremnika.
- “ m-10 ” klasa dodaje marginu od 10 jedinica na sve strane spremnika.
- “ tekst-centar ” klasa poravnava tekst spremnika prema sredini.
Izlaz
Vidi se da se savitljivi elementi preklapaju. To znači da je vrijednost negativnog okomitog razmaka uspješno primijenjena.
Zaključak
Za korištenje negativne vrijednosti razmaka u Tailwindu, koristite ' -razmak-x-