Cuprins
Legături rapide
Recomandări cheie
- Gap CSS este o proprietate versatilă care definește distanța dintre elemente.
- gap este o proprietate de comandă rapidă care poate lua două valori pentru a defini golurile de rând și de coloană.
- gap poate fi utilizat cu aspecte Flexbox, Grid și Multi-coloană.
CSS oferă multe modalități de a așeza elemente pe paginile dvs. web, de la poziționare absolută la design bazat pe grilă. Distanța în jurul și între elemente este la fel de importantă și, din nou, există multe opțiuni. Proprietatea gap este o modalitate utilă și versatilă de introducere a spațiului alb și funcționează cu mai multe scheme de aspect diferite.
Ce este decalajul?
Gap CSS este o proprietate de stil simplă, dar esențială, pentru a ajuta la definirea distanței dintre layout-urile de design. Oferirea spațiului elementelor tale este una dintre regulile de aur ale compoziției pe care ar trebui să le aplicați pentru un design grafic plăcut și eficient.
Puteți utiliza această proprietate pentru a specifica dimensiunea golurilor dintre elemente în trei formate de aspect:
Toate browserele moderne acceptă proprietatea gap, care completează proprietățile modelului de casetă, cum ar fi marginea și umplutura.
Cum se scrie proprietatea Gap CSS
Sintaxa de bază pentru proprietatea gap este:
gap: <row-gap> <column-gap>;
Fiecare valoare poate lua o lungime sau un procent, iar decalajul coloanei este opțional; fără ea, o singură valoare s-ar aplica atât rândurilor, cât și coloanelor. Asa de:
gap: 10em;
… înseamnă că atât rândurile, cât și coloanele vor avea un decalaj de 10 ori dimensiunea actuală a fontului, în timp ce:
gap: 20px 10%;
…va produce un interval de rând de 20 de pixeli și un decalaj de coloană care este o zecime din lățimea elementului care îl conține.
Ar trebui să utilizați gap cu elementele containerului care definesc aspectul, mai degrabă decât elementele din container. Proprietatea își propune să creeze un spațiu uniform între elemente, mai degrabă decât o spațiere variabilă mai complexă.
Folosind gap cu Flexbox
Puteți utiliza gap pentru a controla spațiul dintre rândurile și coloanele pe care le creează un aspect flexibil. Direcția flexibilă pe care o folosește aspectul va determina dacă se aplică decalajul de rând sau de coloană.
În mod implicit, în direcția normală a rândului, articolele dintr-un container flexibil vor apărea unul lângă celălalt. Deci, acest CSS simplu:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Produce acest aspect:
Rețineți că fiecare articol din container folosește proprietăți clasice de model de cutie pentru spațiere: umplutură și margine. Adăugarea unui decalaj:
.flex-layout { gap: 20px; }
Va crește spațiul dintre elementele flexibile, dar nu în jurul lor:
Dacă aspectul dvs. flexibil afișează elemente atât pe coloane, cât și pe rânduri, prin împachetarea elementelor, de exemplu:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Veți vedea efectul ambelor lacune:
Rețineți întotdeauna că alte proprietăți, cum ar fi marginea și conținutul justificat, pot afecta spațiul dintre articole. Gândiți-vă la decalaj ca o valoare minimă, cu excepția cazului în care controlați în mod explicit toate celelalte proprietăți care pot afecta spațierea.
Folosind gap With Grid
Puteți utiliza, de asemenea, intervalul cu un aspect Grid. Principala diferență este că, de obicei, veți dori să specificați atât spațiile de rând, cât și de coloană, deoarece Grid este mai potrivit pentru layout-urile bidimensionale.
Ca și într-un aspect Flex, Grid va afișa elementele unul lângă celălalt în mod implicit, deși puteți controla distanța în jurul fiecărui element folosind umplutură și margine:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Rezultatul este un aspect tipic al grilei:
Adăugarea unui gol:
.grid-layout {
gap: 80px 40px;
}
Se va introduce spațiu între fiecare articol:
Rețineți cum se aplică aici valorile individuale pentru intervalul de rând și coloană, creând un decalaj între rânduri care este de două ori dimensiunea (80px) decalajului dintre coloane (40px). Rețineți că, dacă utilizați o singură valoare, veți defini același decalaj între rânduri și coloane.
Utilizarea decalajului cu aspecte cu mai multe coloane
Puteți utiliza proprietatea gap și cu aspectul coloanelor, dar doar o singură valoare este relevantă în acest caz; nu există rânduri. Aspectele cu mai multe coloane au un decalaj implicit:
.column-layout {
column-count: 3;
}
Dar este foarte mic, la dimensiunea de 1em:
Acest lucru se observă în special atunci când variați fontul și, mai ales, dacă justificați textul:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Rândurile de text rezultate se întâlnesc unele cu altele și devin incomod de citit:
Specificând un decalaj, puteți crește spațiul dintre coloane, oferindu-le mai mult spațiu de respirație.
.column-layout {
gap: 2em;
}
Este posibil să descoperiți că 2em sau chiar 3em dau un rezultat mai lizibil, în funcție de alți factori, cum ar fi lățimea coloanelor dvs.:
Amintiți-vă că puteți utiliza un utilitar de browser, cum ar fi Instrumentele de dezvoltare de la Google Chrome, pentru a vă verifica machetele și pentru a vedea cum proprietăți precum decalajul și marginea vă afectează machetele.
Când utilizați două valori pentru interval, verificați dacă le aveți în modul corect. Ordinea „rând, coloană” poate fi neintuitivă, dar se potrivește cu ordinea altor proprietăți de comandă rapidă, cum ar fi umplutura și marginea.
Modul exact în care veți folosi gap va varia în funcție de schema de aspect la care îl aplicați. În general, totuși, ar trebui să găsești spațiu atunci când ai nevoie de spațiu regulat între articole, dar nu în jurul lor.