Tartalomjegyzék
Gyors linkek
Kulcs elvitelek
- A CSS gap egy sokoldalú tulajdonság, amely meghatározza az elemek közötti távolságot.
- A gap egy parancsikon tulajdonság, amely két értéket vehet igénybe a sor- és oszlopközök meghatározásához.
- rés használható Flexbox, Grid és Multi-column elrendezésekkel.
A CSS számos módot kínál az elemek elrendezésére a weboldalakon, az abszolút pozicionálástól a rács alapú tervezésig. Az elemek körüli és közötti távolság ugyanolyan fontos, és ismét sok lehetőség van. A gap tulajdonság hasznos és sokoldalú módja a fehér terek bevezetésének, és számos különböző elrendezési sémával működik.
Mi a szakadék?
A CSS gap egy egyszerű, de alapvető stílustulajdonság, amely segít meghatározni a tervezési elrendezések térközét. Az elemeinek teret adni a kompozíció egyik aranyszabálya, amelyet alkalmazni kell a tetszetős, hatékony grafikai tervezéshez.
Ezzel a tulajdonsággal három elrendezési formátumban adhatja meg az elemek közötti hézagok méretét:
Minden modern böngésző támogatja a gap tulajdonságot, amely kiegészíti a dobozmodell tulajdonságait, például a margót és a kitöltést.
Hogyan írjuk meg a CSS-rés tulajdonságot
A gap tulajdonság alapvető szintaxisa a következő:
gap: <row-gap> <column-gap>;
Mindegyik érték egy hosszúságú vagy százalékos lehet, és az oszlopköz nem kötelező; nélküle egyetlen érték vonatkozna a sorokra és az oszlopokra is. Így:
gap: 10em;
… azt jelenti, hogy a sorok és az oszlopok között a jelenlegi betűméret 10-szerese lesz, miközben:
gap: 20px 10%;
…20 képpontos sorközt és egy oszlophézagot hoz létre, amely a tartalmazó elem szélességének egytizede.
A hézagot az elrendezést meghatározó tárolóelemeknél kell használni, nem pedig a tárolón belüli elemeknél. Az ingatlan célja, hogy egységes teret hozzon létre az elemek között, nem pedig bonyolultabb, változó távolságot.
A rés használata Flexbox-szal
A rés segítségével szabályozhatja a rugalmas elrendezés által létrehozott sorok és oszlopok közötti teret. Az elrendezés által használt hajlékony irány határozza meg, hogy a sor- vagy az oszlophézag vonatkozik-e.
Alapértelmezés szerint a normál sorirányban a rugalmas tárolón belüli elemek egymás mellett jelennek meg. Tehát ez az egyszerű CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Ezt az elrendezést állítja elő:
Ne feledje, hogy a tárolón belül minden elem klasszikus dobozmodell-tulajdonságokat használ a térközhöz: kitöltés és margó. Egy kis hézag hozzáadása:
.flex-layout { gap: 20px; }
Megnöveli a távolságot a rugalmas elemek között, de nem körülöttük:
Ha a rugalmas elrendezés oszlopokban és sorokban is megjeleníti az elemeket – például az elemek becsomagolásával:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Mindkét rés hatását látni fogja:
Mindig tartsa észben, hogy más tulajdonságok, mint például a margó és az igazoló tartalom, befolyásolhatják az elemek közötti távolságot. Tekintse a hézagot minimális értéknek, kivéve, ha kifejezetten szabályoz minden olyan tulajdonságot, amely befolyásolhatja a térközt.
A rés használata ráccsal
Rács elrendezés esetén is használhatja a rést. A fő különbség az, hogy általában meg kell adni a sor- és oszlophézagokat is, mivel a Grid jobban megfelel a kétdimenziós elrendezéseknek.
A Flex elrendezéshez hasonlóan a Rács alapértelmezés szerint közvetlenül egymás mellett jeleníti meg az elemeket, bár az egyes elemek közötti távolságot a kitöltés és a margó segítségével szabályozhatja:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Az eredmény egy tipikus rácselrendezés:
Hézag hozzáadása:
.grid-layout {
gap: 80px 40px;
}
Szóközt szúr be az egyes elemek közé:
Jegyezze meg, hogy a sor- és oszlophézag egyedi értékei itt érvényesek, így a sorok között olyan hézag jön létre, amely kétszer akkora (80 képpont), mint az oszlopok közötti távolság (40 képpont). Ne feledje, hogy ha egyetlen értéket használ, akkor ugyanazt a rést fogja meghatározni a sorok és oszlopok között.
A rések használata többoszlopos elrendezésekkel
Használhatja a gap tulajdonságot oszlopelrendezéseknél is, de ebben az esetben csak egyetlen érték releváns; nincsenek sorok. A többoszlopos elrendezések alapértelmezett hézaggal rendelkeznek:
.column-layout {
column-count: 3;
}
De nagyon kicsi, 1 méteres méretben:
Ez különösen észrevehető a betűtípus megváltoztatásakor, és különösen akkor, ha indokolja a szöveget:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Az így kapott szövegsorok összefutnak, és kényelmetlenné válik az olvasás:
A hézag megadásával növelheti az oszlopok közötti teret, így több hely marad a levegőhöz.
.column-layout {
gap: 2em;
}
Előfordulhat, hogy a 2em vagy akár a 3em is olvashatóbb eredményt ad, más tényezőktől, például az oszlopok szélességétől függően:
Ne feledje, hogy használhat egy böngésző segédprogramot, például a Google Chrome Fejlesztői Eszközeit az elrendezések ellenőrzéséhez, és megtudhatja, hogy az olyan tulajdonságok, mint a hézag és margó hogyan befolyásolják az elrendezést.
Ha két értéket használ a réshez, ellenőrizze, hogy helyesen van-e megadva. A „sor, oszlop” sorrend nem lehet intuitív, de megfelel a parancsikon egyéb tulajdonságainak, például a kitöltés és a margó sorrendjének.
A rés használatának pontos módja attól függően változik, hogy melyik elrendezési sémára alkalmazza. Általában azonban akkor kell résbe nyúlni, ha rendszeres térre van szüksége az elemek között, de nem körülöttük.