Tento príspevok podrobne popisuje úplný postup pridania medzery medzi stĺpce v Tailwinde.
Ako pridať medzeru medzi stĺpce v Tailwinde?
Ak chcete pridať medzeru medzi stĺpce v Tailwinde, použite vstavaný „ medzera-{veľkosť} ”úžitok. Určuje celočíselnú hodnotu, ktorá predstavuje medzeru medzi stĺpcami horizontálne a vertikálne. Urobme túto úlohu prakticky pomocou uvedených príkladov.
Štruktúra súboru projektu
' medzera-{veľkosť} ” pomôcku možno implementovať v ktoromkoľvek z projektov Tailwind, ktoré sa riadia danou štruktúrou súborov:
Začnime prvým príkladom.
Príklad 1: Použite pomôcku „gap-{size}“ na pridanie rovnakej medzery medzi riadky a stĺpce
Tento príklad používa pomôcku „gap-{size}“ na pridanie rovnakej medzery horizontálne aj vertikálne medzi dané stĺpce.
HTML kód
Prehľad nasledujúceho kódu:
< hlavu >
< odkaz href = '/dist/output.css' rel = 'štýlov' >
< / hlavu >
< telo >
< h1 trieda = 'text-3xl font-tučné text-stred podčiarknuť text-oranžový-600' > Vitajte v Linuxhint! < / h1 < br >
< div trieda = 'mx-2 grid grid-cols-3 gap-4' >
< div trieda = 'border-2 border-orange-600' > Prvý návod < / div >
< div trieda = 'border-2 border-orange-600' > Druhý návod < / div >
< div trieda = 'border-2 border-orange-600' > Tretí návod < / div >
< div trieda = 'border-2 border-orange-600' > Štvrtý návod < / div >
< div trieda = 'border-2 border-orange-600' > Piaty návod < / div >
< div trieda = 'border-2 border-orange-600' > Šiesty návod < / div >
< div trieda = 'border-2 border-orange-600' > Siedmy návod < / div >
< div trieda = 'border-2 border-orange-600' > Ôsmy návod < / div >
< / div >
Vo vyššie uvedených riadkoch kódu:
- Najprv prepojte hlavný súbor CSS „ /dist/output.css “ s existujúcim súborom HTML “ index.html “ pomocou „ ” v sekcii “hlava”.
- Ďalej sekcia „body“ vytvorí prvok „
“, ktorý používa „ Veľkosť písma “, “ Hmotnosť písma “, “ Zarovnanie textu “, “ Textová dekorácia “ a „ Farba textu ” Triedy Tailwind, resp.
- Potom sa pridá prvok „“, ktorý aplikuje „ mriežka nástroj na nastavenie jeho obsahu v uvedenom počte rozložení mriežky, marža ” na nastavenie vodorovného okraja a medzera ” na pridanie špecifikovanej medzery medzi stĺpce.
- V časti tela prvku „
“ je zahrnutých ďalších osem prvkov „“, ktoré využívajú „ Šírka okraja “ a „ Farba okraja “ triedy, resp.Výkon
Spustite vyššie uvedený kód HTML na živom serveri a analyzujte výstup:
Ako je vidieť, výstup primerane pridáva špecifikovanú medzeru medzi stĺpcami v oboch rozmeroch.
Príklad 2: Pomocou pomôcky „gap-{size}“ pridajte medzeru medzi riadky a stĺpce nezávisle
' medzera-{veľkosť} ” možno implementovať aj s rozmermi „x(horizontálne)“ a „y(vertikálne)“ ako „medzera-x-{veľkosť}“ pre riadky a „medzera-y-{veľkosť}“ pre stĺpce na pridanie medzera medzi nimi jednotlivo.Pozrime sa na jeho praktickú realizáciu.
HTML kód
< hlavu >
Pozrite sa na daný kód:
< odkaz href = '/dist/output.css' rel = 'štýlov' >
< / hlavu >
< telo >
< div trieda = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div trieda = 'border-2 border-orange-600' >Prvý návod< / div >
< div trieda = 'border-2 border-orange-600' >Druhý návod< / div >
< div trieda = 'border-2 border-orange-600' >Tretí návod< / div >
< div trieda = 'border-2 border-orange-600' >Štvrtý návod< / div >
< div trieda = 'border-2 border-orange-600' >Piaty návod< / div >
< div trieda = 'border-2 border-orange-600' >Šiesty návod< / div >
< div trieda = 'border-2 border-orange-600' >Siedmy návod< / div >
< div trieda = 'border-2 border-orange-600' >Ôsmy návod< / div >
< / div >
< telo >Tu je „ medzera-x-{veľkosť} nástroj pridá medzeru medzi riadkami a medzera-y-{veľkosť} ” pridá špecifikovanú medzeru medzi stĺpce nezávisle.
Výkon
Vyššie uvedený výsledok overuje, že medzera medzi riadkami a stĺpcami je aplikovaná zodpovedajúcim spôsobom.
Záver
Tailwind CSS poskytuje vstavaný medzera-{veľkosť} ” na pridanie medzery medzi stĺpce. Môže sa tiež použiť na pridanie medzery medzi riadkami a stĺpcami oddelene pomocou „ medzera-x-{veľkosť} “ a „ medzera-y-{veľkosť} ” komunálne služby. Tento príspevok poskytuje úplný postup na pridanie medzery medzi stĺpce v Tailwinde.
- V časti tela prvku „