Ez a bejegyzés a Tailwind oszlopai közötti hézag hozzáadásának teljes eljárását részletezi.
Hogyan lehet hézagot növelni az oszlopok között a hátszélben?
A Tailwind oszlopai közötti rés hozzáadásához használja a beépített „ rés-{méret} ' hasznosság. Egy egész értéket ad meg, amely az oszlopok vízszintes és függőleges közötti rését jelenti. Végezzük el ezt a feladatot gyakorlatilag a felsorolt példák segítségével.
Projekt fájl szerkezete
A ' rés-{méret} ” segédprogram bármely olyan Tailwind projektben megvalósítható, amely az adott fájlstruktúrát követi:
Kezdjük az első példával.
1. példa: Használja a „gap-{size}” segédprogramot, hogy hozzáadja ugyanazt a rést a sorok és az oszlopok között
Ez a példa a „gap-{size}” segédprogramot alkalmazza, hogy ugyanazt a rést vízszintesen és függőlegesen hozzáadja az adott oszlopok közé.
HTML kód
A következő kód áttekintése:
< fej >
< link href = '/dist/output.css' rel = 'stíluslap' >
< / fej >
< test >
< h1 osztály = 'text-3xl font-bold text-center underline text-orange-600' > Üdvözöljük a Linuxhintben! < / h1 >< br >
< div osztály = 'mx-2 grid grid-cols-3 gap-4' >
< div osztály = 'border-2 border-narancs-600' > Első oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Második oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Harmadik oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Negyedik oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Ötödik oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Hatodik oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Hetedik oktatóanyag < / div >
< div osztály = 'border-2 border-narancs-600' > Nyolcadik oktatóanyag < / div >
< / div >
A fenti kódsorokban:
- Először kapcsolja be a fő CSS-fájlt ' /dist/output.css ' a meglévő HTML fájllal ' index.html ' használni a ' ” címkét a „head” részben.
- Ezután a „body” szakasz létrehoz egy „
” elemet, amely a „ Betűméret ”, „ Betűsúly ”, „ Szöveg igazítás ”, „ Szöveg dekoráció ', és a ' Szöveg szín ” Hátszél osztályok, ill.
- Ezt követően egy „” elem kerül hozzáadásra, amely a „ rács ” segédprogram, amellyel beállíthatja a tartalmát a megadott számú rácselrendezésben, a „ árrés ” osztály a vízszintes margó beállításához, és a „ rés ” segédprogramot az oszlopok közötti megadott távolság hozzáadásához.
- A „
” elem törzsrészében további nyolc „” elem található, amelyek a „ Határ szélessége ' és a ' Szegély színe ” osztályok, ill.Kimenet
Futtassa a fenti HTML kódot az élő szerveren, és elemezze a kimenetet:
Amint látható, a kimenet megfelelően hozzáadja a megadott rést az oszlopok között mindkét dimenzióban.
2. példa: Használja a „gap-{size}” segédprogramot a sorok és oszlopok közötti hézag önálló hozzáadásához
A ' rés-{méret} ” segédprogram az „x(vízszintes)” és „y(függőleges)” dimenziókkal is megvalósítható, mint „rés-x-{size}” soroknál, és a „gap-y-{size}” oszlopoknál a közöttük külön-külön.Lássuk a gyakorlati megvalósítását.
HTML kód
< fej >
Nézze meg a megadott kódot:
< link href = '/dist/output.css' rel = 'stíluslap' >
< / fej >
< test >
< div osztály = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div osztály = 'border-2 border-narancs-600' >Első bemutató< / div >
< div osztály = 'border-2 border-narancs-600' >Második oktatóanyag< / div >
< div osztály = 'border-2 border-narancs-600' >Harmadik oktatóanyag< / div >
< div osztály = 'border-2 border-narancs-600' >Negyedik oktatóanyag< / div >
< div osztály = 'border-2 border-narancs-600' >Ötödik oktatóanyag< / div >
< div osztály = 'border-2 border-narancs-600' >Hatodik oktatóanyag< / div >
< div osztály = 'border-2 border-narancs-600' >Seventh Tutorial< / div >
< div osztály = 'border-2 border-narancs-600' >Nyolcadik oktatóanyag< / div >
< / div >
< test >Itt a „ rés-x-{méret} ” segédprogram hozzáadja a rést a sorok és a „ rés-y-{méret} ” önállóan hozzáadja a megadott rést az oszlopok között.
Kimenet
A fenti eredmény igazolja, hogy a sorok és oszlopok közötti rést megfelelően alkalmazzák.
Következtetés
A „Tailwind CSS” beépített „ rés-{méret} ” segédprogram az oszlopok közötti hézag hozzáadásához. Használható a sorok és oszlopok közötti hézag külön-külön hozzáadására is a „ rés-x-{méret} ' és a ' rés-y-{méret} ' segédprogramok. Ez a bejegyzés megadta a teljes eljárást a Tailwind oszlopai közötti hézag hozzáadásához.
- A „