„Tailwind CSS“ tarpas tarp “ komunalinės paslaugos yra naudojamos valdyti tarpą tarp antrinių lanksčių arba tinklinių konteinerių elementų. Jame siūlomos įvairios klasės, pvz., „tarpas-x-
Šiame vadove bus parodytas neigiamos tarpo reikšmės naudojimo „Tailwind“ pavyzdys.
Kaip naudoti neigiamą erdvės vertę Tailwind?
Norėdami naudoti neigiamą tarpo reikšmę „Tailwind“, pirmiausia sukurkite HTML struktūrą. Tada naudokite brūkšnelį ' – “ su norimu „tarpu tarp“ naudingumo klasių, kad konvertuotumėte jį į neigiamą reikšmę. „ -tarpas-x-
Peržiūrėkime toliau pateiktus pavyzdžius, kad tai geriau suprastume.
1 pavyzdys: Taikykite neigiamą horizontalų tarpą tarp elementų
Šiame pavyzdyje turime lankstų konteinerį su keliais antriniais elementais iš eilės. Mes naudosime ' -tarpas-x-8 ” klasė, kad būtų pritaikytas neigiamas horizontalus atstumas tarp lanksčių elementų:
< kūnas >< div klasė = „flex -space-x-8 m-10 h-20 w-max“ >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klasė = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
kūnas >
Čia, tėvų
-
- “ lankstus “ klasė sukuria lankstų išdėstymą.
- “ -tarpas-x-8 “ klasė prideda 8 vienetus neigiamo horizontalaus atstumo tarp lanksčių elementų konteineryje.
- “ m-10 ” klasė prideda 10 vienetų paraštę visose konteinerio pusėse.
- “ h-20 ” klasė nustato konteinerio aukštį iki 20 vnt.
- “ w-maks “ klasė nustato konteinerio plotį iki didžiausio turinio pločio.
Vaikų
-
- “ bg-teal-500 “ klasė nustato flex elementų foną į mėlyną.
- “ w-20 ” klasė nustato kiekvieno lankstaus elemento plotį iki 20 vienetų.
- “ p-5 ” klasė prideda 5 vienetus paminkštinimo į visas kiekvieno lankstaus elemento puses.
- “ siena-2 ” klasė nustato konteinerio kraštinės plotį į 2 vienetus.
- “ kraštinė žalsvai mėlyna-800 “ klasė apvadui pritaiko melsvą spalvą.
Išvestis
Aukščiau pateikta produkcija rodo, kad lankstieji elementai persidengia. Tai rodo, kad neigiama horizontalios erdvės reikšmė buvo sėkmingai pritaikyta.
2 pavyzdys: Taikykite neigiamą vertikalų tarpą tarp elementų
Šiame pavyzdyje turime lankstų konteinerį su kai kuriais antriniais elementais stulpelyje. Mes naudosime ' -tarpas-y-7 “ klasė, kad būtų taikomas neigiamas vertikalus tarpas tarp lanksčių elementų:
< kūnas >< div klasė = 'flex flex-col -space-y-7 m-10 text-center' >
< div klasė = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klasė = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klasė = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klasė = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
kūnas >
Čia:
-
- “ lankstus “ klasė sukuria lankstų išdėstymą.
- “ flex-col “ klasė išlygiuoja lanksčius elementus vertikalia kryptimi.
- “ -tarpas-y-5 “ klasė prideda 7 vienetus neigiamo vertikalaus atstumo tarp lanksčių elementų konteineryje.
- “ m-10 ” klasė prideda 10 vienetų paraštę visose konteinerio pusėse.
- “ teksto centras “ klasė sulygiuoja konteinerio tekstą centre.
Išvestis
Matyti, kad lankstieji elementai persidengia. Tai rodo, kad neigiama vertikalios erdvės reikšmė buvo sėkmingai pritaikyta.
Išvada
Jei norite naudoti neigiamą tarpo reikšmę „Tailwind“, naudokite „ -tarpas-x-