Indholdsfortegnelse
hurtige links
Nøgle takeaways
- CSS gap er en alsidig egenskab, der definerer afstanden mellem elementer.
- gap er en genvejsegenskab, der kan tage to værdier for at definere række- og kolonnemellemrum.
- gap kan bruges med Flexbox, Grid og Multi-column layouts.
CSS tilbyder mange måder at lægge elementer ud på dine websider, fra absolut positionering til gitterbaseret design. Afstanden omkring og mellem elementer er lige så vigtig, og igen er der mange muligheder. Gap-egenskaben er en nyttig og alsidig måde at introducere hvidt rum på, og det fungerer med flere forskellige layoutskemaer.
Hvad er gap?
CSS gap er en enkel, men vigtig stilegenskab, der hjælper med at definere afstanden mellem dine designlayouts. At give dine elementer plads er en af de gyldne regler for komposition, som du bør anvende for et behageligt, effektivt grafisk design.
Du kan bruge denne egenskab til at angive størrelsen af hullerne mellem elementer i tre layoutformater:
Alle moderne browsere understøtter gap-egenskaben, som komplementerer boksmodelegenskaber som margin og polstring.
Sådan skriver du CSS gap-egenskaben
Den grundlæggende syntaks for gap-egenskaben er:
gap: <row-gap> <column-gap>;
Hver værdi kan tage en længde eller en procentdel, og kolonne-mellemrum er valgfrit; uden den ville en enkelt værdi gælde for både rækker og kolonner. Så:
gap: 10em;
… betyder, at både rækker og kolonner vil have et mellemrum på 10 gange den aktuelle skriftstørrelse, mens:
gap: 20px 10%;
… vil producere et rækkemellemrum på 20 pixels og et kolonnemellemrum, der er en tiendedel af det indeholdende elements bredde.
Du bør bruge mellemrum med containerelementer, der definerer layoutet, snarere end elementer i containeren. Ejendommen sigter mod at skabe ensartet mellemrum mellem emnerne frem for mere kompleks, variabel afstand.
Brug af gap med Flexbox
Du kan bruge mellemrummet til at kontrollere mellemrummet mellem rækkerne og kolonnerne, som et fleksibelt layout opretter. Den flex-retning, dit layout bruger, afgør, om rækkemellemrummet eller kolonnemellemrummet gælder.
Som standard, i den normale rækkeretning, vil elementer i en fleksibel beholder blive vist ved siden af hinanden. Så denne simple CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Producerer dette layout:
Bemærk, at hvert element i beholderen bruger klassiske kassemodelegenskaber til mellemrum: polstring og margin. Tilføjer noget hul:
.flex-layout { gap: 20px; }
Vil øge afstanden mellem fleksible genstande, men ikke omkring dem:
Hvis dit flexlayout viser elementer på tværs af både kolonner og rækker – ved at ombryde elementer, f.eks.:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Du vil se effekten af begge huller:
Husk altid, at andre egenskaber, såsom margen og berettigelsesindhold, kan påvirke afstanden mellem elementer. Tænk på gap som en minimumsværdi, medmindre du eksplicit kontrollerer alle andre egenskaber, der kan påvirke afstanden.
Brug af gap With Grid
Du kan også bruge mellemrum med et gitterlayout. Den største forskel er, at du normalt vil angive både række- og kolonnemellemrum, da Grid er mere velegnet til todimensionelle layouts.
Som i et Flex-layout vil Grid som standard vise elementer lige ved siden af hinanden, selvom du kan styre afstanden omkring hvert element ved hjælp af polstring og margen:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Resultatet er et typisk gitterlayout:
Tilføjelse af et hul:
.grid-layout {
gap: 80px 40px;
}
Vil indsætte mellemrum mellem hvert element:
Bemærk, hvordan de individuelle værdier for række- og kolonnegabet gælder her, hvilket skaber et mellemrum mellem rækker, der er dobbelt så stort (80px) af mellemrummet mellem kolonner (40px). Husk, at hvis du bruger en enkelt værdi, vil du definere det samme mellemrum mellem rækker og kolonner.
Brug af mellemrum med multi-søjlelayouts
Du kan også bruge gap-egenskaben med kolonnelayout, men kun en enkelt værdi er relevant i dette tilfælde; der er ingen rækker. Layout med flere kolonner har et standardmellemrum:
.column-layout {
column-count: 3;
}
Men den er meget lille med en størrelse på 1 em:
Dette er især bemærkelsesværdigt, når du varierer skrifttypen, og især hvis du begrunder teksten:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
De resulterende tekstlinjer løber ind i hinanden og bliver ubehagelige at læse:
Ved at angive et mellemrum kan du øge mellemrummet mellem søjlerne og give dem mere plads til at trække vejret.
.column-layout {
gap: 2em;
}
Du kan opleve, at 2em eller endda 3em giver et mere læsbart resultat, afhængigt af andre faktorer som bredden af dine kolonner:
Husk, at du kan bruge et browserværktøj som Google Chromes Dev Tools til at kontrollere dine layouts og se, hvordan egenskaber som gap og margin påvirker dine layouts.
Når du bruger to værdier for gap, skal du kontrollere, at du har dem den rigtige vej rundt. Rækkefølgen “række, kolonne” kan være uintuitiv, men den matcher rækkefølgen af andre genvejsegenskaber som udfyldning og margen.
Den nøjagtige måde, du bruger gap på, vil variere afhængigt af, hvilket layoutskema du anvender det på. Generelt bør du dog række ud efter mellemrum, når du har brug for regelmæssig plads mellem elementer, men ikke omkring dem.