Šiame tinklaraštyje bus pateikta idėja, kaip priskirti vienodą erdvę tarp kelių Tailwind elementų.
Kaip priskirti vienodą erdvę tarp kelių elementų užpakaliniame vėjyje?
Vartotojai gali priskirti vienodus tarpus tarp elementų naudodami „ tarpas-{x/y}-{dydis} “ naudingumo klasė. Vartotojai gali pridėti vietos x arba y ašyje nurodydami sveikojo skaičiaus reikšmę. Tarpų įrankis yra būtinas, nes jis daro tinklalapį patrauklų. Jei tinklalapyje nėra tinkamų tarpų tarp elementų, jis nepritrauks vartotojų.
Paimkime kodo pavyzdį, kad priskirtumėte vienodą erdvę tarp tinklelio elementų.
1 būdas: tarpo priskyrimas X ašyje.
Lygi erdvė, priskirta x ašyje, sudaro vienodą atstumą elemento dešinėje ir kairėje. Norėdami priskirti tarpą x ašyje, naudokite šią sintaksę:
erdvė - x - { dydis }
Dydis gali būti bet koks sveikasis skaičius.
Apsvarstykite toliau pateiktą kodą, kad priskirtumėte vienodą erdvę x ašyje:
< kūnas >< div klasė = 'mx-4 grid grid-cols-4 space-x-4' >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
kūnas >
Šiame kode:
- “ mx-4 “ x ašyje (dešinėje ir kairėje) prideda 4 pikselių paraštę.
- „ tinklelis “ klasė sukuria tinklelį.
- „ tinklelis-stulpeliai-4 “ padarykite 4 stulpelius tinklelyje.
- „ erdvė-x-4 “ prideda 4 pikselių tarpą tarp tinklelio elementų.
- “ bg-green-400 “ nustato fono spalvą į žalią.
- “ h-16 “ nustato aukštį į 16 pikselių.
- „ suapvalintas-lg “ kampą daro apvalų, o kraštinės spindulys yra didelis.
- „ siena-2 “ aplink elementą sukuria 2 pikselių kraštinę.
- “ kraštinė-žalia-800 “ padaro kraštinę tamsiai žalią.
Išvestis
Peržiūrėkite aukščiau pateikto kodo sukurtą išvestį:
Matyti, kad tarp elementų priskirtas 4 pikselių atstumas.
2 būdas: vietos y ašyje priskyrimas.
Atstumas y ašyje gali būti priskirtas panašiai kaip aukščiau aprašytas metodas, šiek tiek pakeitus aukščiau pateiktą kodą. Jis priskiria tarpus išilgai y ašies (viršuje ir apačioje). Jo sintaksė yra tokia:
Žemiau esantis kodas gali būti įdiegtas norint pridėti tarpų išilgai y ašies:
< kūnas >< div klasė = 'mx-4 my-4 space-y-4' >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div klasė = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
kūnas >
Šiame kode:
- “ mx-4 “ prideda 4 pikselių paraštę elementų kairėje ir dešinėje, kad išvestis būtų labiau optimizuota.
- “ mano-4 “ prideda 4 pikselių paraštę y ašyje (viršuje ir apačioje).
- “ erdvė-y-4 “ prideda 4 pikselių vietos y ašyje (viršuje ir apačioje).
Išvestis
Išsaugokite aukščiau pateiktą kodą ir peržiūrėkite jo sukurtą tinklalapį, kad pamatytumėte tarpus kaip:
Tai viskas apie vienodos erdvės tarp elementų priskyrimą.
Išvada
Norėdami priskirti vienodą erdvę tarp kelių „Tailwind“ elementų, vartotojai gali naudoti „ tarpas-{x/y}-{dydis} ” naudingumo klasė ir nurodykite sveikojo skaičiaus reikšmę kaip dydį pagal reikalavimą. Vienodas atstumas tarp elementų leidžia geriau keisti išvestį, o žiūrintieji toliau domėtis tinklalapiu. Šiame įraše buvo pateiktas būdas priskirti vienodą erdvę tarp kelių „Tailwind“ elementų.