Innehållsförteckning
snabblänkar
Viktiga takeaways
- CSS-gap är en mångsidig egenskap som definierar avståndet mellan elementen.
- gap är en genvägsegenskap som kan ta två värden för att definiera rad- och kolumngap.
- gap kan användas med Flexbox, Grid och Multi-column layouter.
CSS erbjuder många sätt att lägga ut element på dina webbsidor, från absolut positionering till rutnätsbaserad design. Avståndet runt och mellan elementen är lika viktigt och återigen finns det många alternativ. Egenskapen gap är ett användbart och mångsidigt sätt att introducera vitt utrymme, och det fungerar med flera olika layoutscheman.
Vad är gap?
CSS gap är en enkel men viktig stilegenskap som hjälper dig att definiera avståndet mellan dina designlayouter. Att ge dina element utrymme är en av de gyllene reglerna för komposition som du bör tillämpa för tilltalande, effektiv grafisk design.
Du kan använda den här egenskapen för att ange storleken på mellanrummen mellan objekt i tre layoutformat:
Alla moderna webbläsare stöder gap-egenskapen som kompletterar box-modellegenskaper som marginal och utfyllnad.
Hur man skriver CSS gap-egenskapen
Den grundläggande syntaxen för gap-egenskapen är:
gap: <row-gap> <column-gap>;
Varje värde kan ta en längd eller en procentsats, och kolumngap är valfritt; utan det skulle ett enda värde gälla både rader och kolumner. Så:
gap: 10em;
…betyder att både rader och kolumner kommer att ha ett gap på 10 gånger den nuvarande teckenstorleken, medan:
gap: 20px 10%;
… kommer att producera ett radavstånd på 20 pixlar och ett kolumnavstånd som är en tiondel av det innehållande elementets bredd.
Du bör använda gap med containerelement som definierar layouten, snarare än element i containern. Fastigheten syftar till att skapa enhetliga utrymmen mellan objekt snarare än mer komplexa, varierande avstånd.
Använder gap med Flexbox
Du kan använda mellanrum för att styra utrymmet mellan raderna och kolumnerna som en flexibel layout skapar. Den flexriktning som din layout använder avgör om radgapet eller kolumngapet gäller.
Som standard, i den normala radriktningen, visas objekt i en flexbehållare bredvid varandra. Så denna enkla CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Producerar denna layout:
Observera att varje objekt i behållaren använder klassiska lådmodellegenskaper för avstånd: utfyllnad och marginal. Lägger till lite lucka:
.flex-layout { gap: 20px; }
Kommer att öka utrymmet mellan flexartiklar, men inte runt dem:
Om din flexlayout visar objekt över både kolumner och rader—genom att radbryta objekt, till exempel:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Du kommer att se effekten av båda luckorna:
Tänk alltid på att andra egenskaper, som marginal och motivera-innehåll, kan påverka utrymmet mellan objekt. Tänk på gap som ett minimivärde om du inte uttryckligen kontrollerar alla andra egenskaper som kan påverka avståndet.
Använda gap With Grid
Du kan också använda gap med en Grid-layout. Den största skillnaden är att du vanligtvis vill ange både rad- och kolumnluckor eftersom Grid är mer lämpad för tvådimensionella layouter.
Som i en Flex-layout kommer Grid att visa objekt bredvid varandra som standard, även om du kan styra avståndet runt varje objekt med utfyllnad och marginal:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Resultatet är en typisk rutnätslayout:
Lägga till en lucka:
.grid-layout {
gap: 80px 40px;
}
Kommer att infoga mellanslag mellan varje objekt:
Notera hur de individuella värdena för rad- och kolumngap gäller här, vilket skapar ett gap mellan rader som är dubbelt så stort (80px) av gapet mellan kolumner (40px). Kom ihåg att om du använder ett enda värde kommer du att definiera samma gap mellan rader och kolumner.
Använda gap med flerkolumnslayouter
Du kan också använda gap-egenskapen med kolumnlayouter, men bara ett enda värde är relevant i det här fallet; det finns inga rader. Layouter med flera kolumner har ett standardmellanrum:
.column-layout {
column-count: 3;
}
Men den är väldigt liten, med en storlek på 1 em:
Detta är särskilt märkbart när du varierar typsnittet och särskilt om du motiverar texten:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
De resulterande textraderna kör in i varandra och blir obekväma att läsa:
Genom att ange ett mellanrum kan du öka utrymmet mellan kolumnerna, vilket ger dem mer utrymme att andas.
.column-layout {
gap: 2em;
}
Du kanske upptäcker att 2em eller till och med 3em ger ett mer läsbart resultat, beroende på andra faktorer som bredden på dina kolumner:
Kom ihåg att du kan använda ett webbläsarverktyg som Google Chromes utvecklingsverktyg för att kontrollera dina layouter och se hur egenskaper som gap och marginal påverkar dina layouter.
När du använder två värden för gap, kontrollera att du har dem åt rätt håll. Ordningen ”rad, kolumn” kan vara ointuitiv, men den matchar ordningen för andra genvägsegenskaper som utfyllnad och marginal.
Det exakta sättet du använder gapet kommer att variera beroende på vilket layoutschema du använder det på. I allmänhet bör du dock sträcka dig efter gap när du behöver regelbundet utrymme mellan föremålen, men inte runt dem.