Table of Contents
Rychlé odkazy
Klíčové věci
- CSS mezera je všestranná vlastnost, která definuje mezery mezi prvky.
- mezera je vlastnost zkratky, která může nabývat dvou hodnot k definování mezer mezi řádky a sloupci.
- mezeru lze použít s rozvržením Flexbox, Grid a Multi-column.
CSS nabízí mnoho způsobů, jak rozmístit prvky na vašich webových stránkách, od absolutního umístění až po návrh založený na mřížce. Rozestupy kolem prvků a mezi nimi jsou stejně důležité a opět existuje mnoho možností. Vlastnost mezera je užitečný a všestranný způsob zavedení bílého prostoru a funguje s několika různými schématy rozvržení.
Co je mezera?
CSS mezera je jednoduchá, ale nezbytná vlastnost stylu, která pomáhá definovat mezery ve vašich návrhových rozvrženích. Dát prostor svým prvkům je jedním ze zlatých pravidel kompozice, která byste měli dodržovat pro líbivý, efektní grafický design.
Tuto vlastnost můžete použít k určení velikosti mezer mezi položkami ve třech formátech rozvržení:
Všechny moderní prohlížeče podporují vlastnost gap, která doplňuje vlastnosti box-model, jako je margin a padding.
Jak napsat vlastnost mezery CSS
Základní syntaxe pro vlastnost gap je:
gap: <row-gap> <column-gap>;
Každá hodnota může mít délku nebo procento a mezera mezi sloupci je volitelná; bez něj by jedna hodnota platila pro řádky i sloupce. Tak:
gap: 10em;
…znamená, že řádky i sloupce budou mít mezeru 10násobku aktuální velikosti písma, přičemž:
gap: 20px 10%;
…vytvoří mezeru v řádcích 20 pixelů a mezeru ve sloupcích, která je jedna desetina šířky obsahujícího prvku.
Mezeru byste měli používat s prvky kontejneru, které definují rozvržení, spíše než prvky v kontejneru. Vlastnost si klade za cíl vytvořit jednotný prostor mezi položkami spíše než složitější, variabilní rozestupy.
Použití mezery s Flexboxem
Mezeru můžete použít k ovládání prostoru mezi řádky a sloupci, který flexibilní rozvržení vytváří. Flexibilní směr, který vaše rozvržení používá, určí, zda se použije mezera mezi řádky nebo mezerou ve sloupcích.
Ve výchozím nastavení se ve směru normálního řádku položky v kontejneru Flex zobrazí vedle sebe. Takže toto jednoduché CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Vytváří toto rozložení:
Všimněte si, že každá položka v kontejneru používá klasické vlastnosti box-model pro mezery: výplň a okraj. Přidání nějaké mezery:
.flex-layout { gap: 20px; }
Zvětší prostor mezi pružnými předměty, ale ne kolem nich:
Pokud vaše flexibilní rozvržení zobrazuje položky ve sloupcích i řádcích – zalomením položek, například:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Uvidíte účinek obou mezer:
Vždy mějte na paměti, že mezery mezi položkami mohou ovlivnit další vlastnosti, jako je okraj a zarovnání obsahu. Myslete na mezeru jako na minimální hodnotu, pokud výslovně neřídíte všechny ostatní vlastnosti, které mohou mezery ovlivnit.
Použití mezery s mřížkou
Můžete také použít mezeru s rozložením mřížky. Hlavním rozdílem je, že obvykle budete chtít zadat mezery mezi řádky a sloupci, protože mřížka je vhodnější pro dvourozměrná rozvržení.
Stejně jako v rozvržení Flex bude mřížka ve výchozím nastavení zobrazovat položky těsně vedle sebe, i když mezery kolem každé položky můžete ovládat pomocí odsazení a okraje:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Výsledkem je typické rozložení mřížky:
Přidání mezery:
.grid-layout {
gap: 80px 40px;
}
Vloží mezeru mezi každou položku:
Všimněte si, jak se zde použijí jednotlivé hodnoty pro mezeru mezi řádky a sloupci, čímž vznikne mezera mezi řádky, která je dvakrát větší (80px) než mezera mezi sloupci (40px). Pamatujte, že pokud použijete jednu hodnotu, budete definovat stejnou mezeru mezi řádky a sloupci.
Použití mezery s rozvržením s více sloupci
Vlastnost mezery můžete použít také u rozvržení sloupců, ale v tomto případě je relevantní pouze jedna hodnota; nejsou žádné řádky. Rozvržení s více sloupci mají výchozí mezeru:
.column-layout {
column-count: 3;
}
Ale je to velmi malé, o velikosti 1 em:
To je zvláště patrné při změně písma a zejména, pokud zarovnáváte text:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Výsledné řádky textu na sebe narážejí a čtení je nepříjemné:
Zadáním mezery můžete zvětšit prostor mezi sloupy a poskytnout jim více prostoru k dýchání.
.column-layout {
gap: 2em;
}
Možná zjistíte, že 2em nebo dokonce 3em poskytují čitelnější výsledek, v závislosti na dalších faktorech, jako je šířka vašich sloupců:
Nezapomeňte, že ke kontrole rozvržení můžete použít nástroj prohlížeče, jako je Google Chrome Dev Tools, a zjistit, jak vlastnosti jako mezera a okraj ovlivňují rozvržení.
Při použití dvou hodnot pro mezeru zkontrolujte, zda je máte správně. Pořadí „řádek, sloupec“ může být neintuitivní, ale odpovídá pořadí jiných vlastností zkratky, jako je odsazení a okraj.
Přesný způsob, jakým mezeru použijete, se bude lišit v závislosti na schématu rozvržení, na které ji aplikujete. Obecně byste však měli sáhnout po mezerě, když potřebujete pravidelný prostor mezi předměty, ale ne kolem nich.