Ta blog bo ponudil idejo o dodelitvi enakega prostora med več elementi v Tailwindu.
Kako dodeliti enak razmik med več elementi v zadnjem vetru?
Uporabniki lahko dodelijo enake presledke med elementi z uporabo ' presledek-{x/y}-{velikost} ” razred uporabnosti. Uporabniki lahko dodajo prostor na osi x ali y tako, da podajo celoštevilsko vrednost. Pripomoček za razmik je potreben, ker naredi spletno stran privlačno. Če spletna stran nima pravilnega razmika med elementi, ne bo pritegnila uporabnikov.
Vzemimo primer kode za dodelitev enakega prostora med elementi mreže.
1. način: Dodeljevanje prostora na osi X.
Enak prostor, dodeljen na osi x, naredi enak razmik desno in levo od elementa. Za dodelitev prostora na osi x uporabite naslednjo sintakso:
prostora - x - { velikost }
Velikost je lahko poljubna celoštevilska vrednost.
Upoštevajte spodnjo kodo, da dodelite enak prostor na osi x:
< telo >< div razred = 'mx-4 mreža grid-cols-4 presledek-x-4' >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 1 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 2 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 3 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 4 div >
div >
telo >
V tej kodi:
- “ mx-4 ” doda rob 4 px na os x (desno in levo).
- ' mreža ” razred ustvari mrežo.
- ' grid-cols-4 ” naredite 4 stolpce v mreži.
- ' presledek-x-4 ” doda 4px prostor med elementi mreže.
- “ bg-zelena-400 ” nastavi barvo ozadja na zeleno.
- “ h-16 ” nastavi višino na 16 slikovnih pik.
- ' zaobljeno-lg ” naredi vogal okrogel in polmer obrobe je velik.
- ' meja-2 ” naredi obrobo 2px okoli elementa.
- “ obroba-zelena-800 ” naredi obrobo temno zeleno.
Izhod
Predoglejte si izhod, ustvarjen z zgornjo kodo:
Vidimo lahko, da je med elementi dodeljen razmik 4px.
2. način: Dodeljevanje prostora na osi y.
Razmik je mogoče dodeliti na osi y, podobno kot pri zgornji metodi, z majhnimi spremembami zgornje kode. Dodeli presledke vzdolž osi y (zgoraj in spodaj). Sintaksa za to je:
Spodnjo kodo je mogoče implementirati za dodajanje presledkov vzdolž osi y:
< telo >< div razred = 'mx-4 moj-4 prostor-y-4' >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 1 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 2 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 3 div >
< div razred = 'bg-zelena-400 h-16 zaobljena-lg obroba-2 obroba-zelena-800' > 4 div >
div >
telo >
V tej kodi:
- “ mx-4 ” doda rob 4px levo in desno od elementov, da je izpis bolj optimiziran.
- “ moj-4 ” doda 4px rob na osi y (zgoraj in spodaj).
- “ prostor-y-4 ” doda prostor 4 slikovnih pik na osi y (zgoraj in spodaj).
Izhod
Shranite zgornjo kodo in si predoglejte spletno stran, ki jo je ustvarila, da vidite razmik kot:
To je vse o dodelitvi enakega prostora med elementi.
Zaključek
Za dodelitev enakega prostora med več elementi v Tailwindu lahko uporabniki uporabijo » presledek-{x/y}-{velikost} ” uporabnega razreda in podajte vrednost celega števila kot velikost glede na zahtevo. Enak razmik med elementi naredi izpis bolj razširljiv in gledalci ostanejo vključeni v spletno stran. Ta objava je zagotovila metodo za dodelitev enakega prostora med več elementi v Tailwindu.