Ta objava podrobneje opisuje celoten postopek dodajanja vrzeli med stolpce v Tailwindu.
Kako dodati vrzel med stolpci v Tailwind?
Če želite dodati vrzel med stolpci v Tailwindu, uporabite vgrajeno » vrzel-{velikost} ” pripomoček. Podaja celoštevilsko vrednost, ki predstavlja vrzel med stolpci vodoravno in navpično. Naredimo to nalogo praktično s pomočjo navedenih primerov.
Struktura projektne datoteke
' vrzel-{velikost} ” lahko implementirate v katerega koli od projektov Tailwind, ki sledijo podani datotečni strukturi:
Začnimo s prvim primerom.
1. primer: uporabite pripomoček »gap-{size}« za dodajanje iste vrzeli med vrsticami in stolpci
Ta primer uporablja pripomoček »gap-{size}« za dodajanje iste vrzeli vodoravno in navpično med danimi stolpci.
HTML koda
Pregled naslednje kode:
< glavo >
< povezava href = '/dist/output.css' rel = 'stylesheet' >
< / glavo >
< telo >
< h1 razred = 'text-3xl font-bold text-center underline text-orange-600' > Dobrodošli v Linuxhintu! < / h1 >< št >
< div razred = 'mx-2 mreža grid-cols-3 vrzel-4' >
< div razred = 'border-2 border-orange-600' > Prva vadnica < / div >
< div razred = 'border-2 border-orange-600' > Druga vadnica < / div >
< div razred = 'border-2 border-orange-600' > Tretja vadnica < / div >
< div razred = 'border-2 border-orange-600' > Četrta vadnica < / div >
< div razred = 'border-2 border-orange-600' > Peta vadnica < / div >
< div razred = 'border-2 border-orange-600' > Šesta vadnica < / div >
< div razred = 'border-2 border-orange-600' > Sedma vadnica < / div >
< div razred = 'border-2 border-orange-600' > Osma vadnica < / div >
< / div >
V zgornjih vrsticah kode:
- Najprej povežite glavno datoteko CSS ' /dist/output.css ' z obstoječo datoteko HTML ' index.html ' uporabljati '
« v razdelku »glava«. - Nato razdelek »body« ustvari element »
«, ki uporablja » Velikost pisave ”, “ Teža pisave ”, “ Poravnava besedila ”, “ Okras besedila ', in ' Barva besedila ” Razredi hrbtnega vetra oz.
- Po tem se doda element »«, ki uporabi » mreža ' za nastavitev njegove vsebine v navedenem številu mrežnih postavitev, ' marža ' za nastavitev vodoravnega roba in ' vrzel ” za dodajanje določene vrzeli med stolpci.
- V razdelku telesa elementa “
” je vključenih nadaljnjih osem elementov “”, ki uporabljajo “ Širina obrobe ' in ' Barva obrobe ” razredov oz.Izhod
Zaženite zgornjo kodo HTML v strežniku v živo in analizirajte izhod:
Kot je razvidno, izhod ustrezno doda navedeno vrzel med stolpci v obeh dimenzijah.
2. primer: uporabite pripomoček »gap-{size}«, da neodvisno dodate vrzel med vrsticami in stolpci
' vrzel-{velikost} ” lahko implementirate tudi z dimenzijama “x(horizontalno)” in “y(vertical)” kot “gap-x-{size}” za vrstice in “gap-y-{size}” za stolpce, da dodate vrzel med njimi posamezno.Oglejmo si njegovo praktično izvedbo.
HTML koda
< glavo >
Oglejte si dano kodo:
< povezava href = '/dist/output.css' rel = 'stylesheet' >
< / glavo >
< telo >
< div razred = 'mx-2 mreža grid-cols-4 vrzel-x-4 vrzel-y-6' >
< div razred = 'border-2 border-orange-600' >Prva vadnica< / div >
< div razred = 'border-2 border-orange-600' >Druga vadnica< / div >
< div razred = 'border-2 border-orange-600' >Tretja vadnica< / div >
< div razred = 'border-2 border-orange-600' >Četrta vadnica< / div >
< div razred = 'border-2 border-orange-600' >Peta vadnica< / div >
< div razred = 'border-2 border-orange-600' >Šesta vadnica< / div >
< div razred = 'border-2 border-orange-600' >Sedma vadnica< / div >
< div razred = 'border-2 border-orange-600' >Osma vadnica< / div >
< / div >
< telo >Tukaj je ' vrzel-x-{velikost} ” doda vrzel med vrsticami in vrzel-y-{velikost} ” neodvisno doda navedeno vrzel med stolpci.
Izhod
Zgornji izid potrjuje, da je vrzel med vrsticami in stolpci ustrezno uporabljena.
Zaključek
»Tailwind CSS« ponuja vgrajeno » vrzel-{velikost} ” za dodajanje vrzeli med stolpci. Uporabite ga lahko tudi za ločeno dodajanje vrzeli med vrsticami in stolpci prek » vrzel-x-{velikost} ' in ' vrzel-y-{velikost} ” pripomočki. Ta objava je zagotovila celoten postopek za dodajanje vrzeli med stolpce v Tailwind.
- V razdelku telesa elementa “