V Tailwind CSS je » prostor med ” se uporabljajo za nadzor prostora med podrejenimi elementi vsebnikov flex ali grid. Ponuja različne razrede, kot sta »space-x-
Ta vodnik bo ponazoril metodo uporabe negativne vrednosti prostora v Tailwindu.
Kako uporabiti negativno vrednost prostora v Tailwind?
Če želite uporabiti negativno vrednost prostora v Tailwindu, najprej naredite strukturo HTML. Nato uporabite pomišljaj ' – « z želenim »prostorom med« razredi uporabnosti, da ga pretvorite v negativno vrednost. ' -presledek-x-
Oglejmo si spodnje primere, da jih bomo bolje razumeli.
Primer 1: Uporabite negativni vodoravni razmik med elementi
V tem primeru imamo vsebnik flex z nekaj podrejenimi elementi v vrsti. Uporabili bomo ' -presledek-x-8 ” za uporabo negativnega vodoravnega razmika med elementi flex:
< telo >< div razred = 'flex -space-x-8 m-10 h-20 w-max' >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div razred = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
telo >
Tukaj, v starševskem elementu
-
- “ flex ” razred ustvari prilagodljivo postavitev.
- “ -presledek-x-8 ” doda 8 enot negativnega vodoravnega razmika med upogljivimi elementi znotraj vsebnika.
- “ m-10 ” doda rob 10 enot na vse strani vsebnika.
- “ h-20 ” nastavi višino vsebnika na 20 enot.
- “ w-maks ” nastavi širino vsebnika na največjo širino vsebine.
V podrejenih elementih
-
- “ bg-teal-500 ” nastavi ozadje elementov flex na temno modro.
- “ w-20 ” nastavi širino vsakega elementa flex na 20 enot.
- “ p-5 ” doda 5 enot oblazinjenja na vse strani vsakega upogljivega predmeta.
- “ meja-2 ” nastavi širino obrobe vsebnika na 2 enoti.
- “ obroba-teal-800 ” uporabi modrozeleno barvo obrobe.
Izhod
Zgornji rezultat kaže, da se elementi flex prekrivajo. To pomeni, da je bila vrednost negativnega vodoravnega prostora uspešno uporabljena.
Primer 2: Uporabite negativni navpični razmik med elementi
V tem primeru imamo vsebnik flex z nekaj podrejenimi elementi v stolpcu. Uporabili bomo ' -prostor-y-7 ” za uporabo negativnega navpičnega razmika med upogljivimi elementi:
< telo >< div razred = 'flex flex-col -space-y-7 m-10 text-center' >
< div razred = 'bg-teal-500 p-5 meja-2 meja-teal-800' > 1 div >
< div razred = 'bg-teal-500 p-5 meja-2 meja-teal-800' > 2 div >
< div razred = 'bg-teal-500 p-5 meja-2 meja-teal-800' > 3 div >
< div razred = 'bg-teal-500 p-5 meja-2 meja-teal-800' > 4 div >
div >
telo >
Tukaj:
-
- “ flex ” razred ustvari prilagodljivo postavitev.
- “ flex-col ” poravna elemente flex v navpični smeri.
- “ -presledek-y-5 ” doda 7 enot negativnega navpičnega razmika med upogljivimi elementi znotraj vsebnika.
- “ m-10 ” doda rob 10 enot na vse strani vsebnika.
- “ besedilno središče ” poravna besedilo vsebnika na sredino.
Izhod
Vidi se, da se flex elementi prekrivajo. To pomeni, da je bila vrednost negativnega navpičnega prostora uspešno uporabljena.
Zaključek
Če želite uporabiti negativno vrednost prostora v Tailwindu, uporabite » -presledek-x-