CSS - Okraje bloku

Okraj se nachází na vnějším obvodu bloku a určuje jeho odstup od sousedních bloků. Okraj je vždy průhledný, jeho barvu nelze změnit, řídit lze jen jeho velikost.

K tomu slouží čtveřice vlastností

margin-top
margin-right
margin-bottom
margin-left

které po řadě určují šířku horního, pravého, spodního a levého okraje. Lze ji zadat buď prostřednictvím některé z obvyklých jednotek dostupných v CSS, nebo v procentech. Například typické okraje odstavců jsou definovány zhruba takto:

p {
    margin-top: 1em;
    margin-right: 0;
    margin-bottom: 1em;
    margin-left: 0;
}

Způsobí, že po stranách se okraje nevynechávají, zatímco na výšku jsou od sebe odstavce odděleny prázdnými řádky.

S procenty se pojí jeden drobný chyták: zadáte-li okraj v procentech, počítá se vůči šířce obsahu bloku, v němž je tento obsažen. I svislé okraje se vztahují k šířce, nikoli k výšce, jak by se zdálo logické. Důvodem je, aby byly okraje stejné, pokud např. zadáte, že na všech stranách má být okraj široký 5%.

Vlastnost margin

Jak je v podobných situacích obvyklé, nabízí CSS integrující vlastnost margin umožňující nastavit všechny čtyři okraje naráz. Její hodnotou jsou jeden až čtyři údaje. Jsou-li čtyři, určuje první z nich šířku horního okraje a další pak postupují postupují ve směru hodinových ručiček. Čili uvádějí se ve stejném pořadí, v němž jsem výše uvedl dílčí vlastnosti margin-*.

Je-li údajů méně než čtyři, převezme se chybějící údaj z protilehlého okraje. Význam shrnuje následující tabulka:

Z toho plyne, že výše uvedenou definici okrajů pro odstavec by bylo možno zkrátit na

p { margin: 1em 0; }

Prolínání okrajů

Okud padnou pod sebe dva bloky s nenulovými okraji, dojde k prolnutí okrajů. To znamená, že okraje se „zasunou“ do sebe až na doraz, čili až se hrana rámečku jednoho z prvků dotkne hrany okraje protějšího.

Jsou-li oba okraje stejně velké, bude mít výsledný okraj velikost totožnou s velikostí jednoho okraje (varianta „a“ na následujícím obrázku). Pokud jsou jejich velikosti odlišné, zůstane větší z nich (případ „b“). Totéž se stane s okrajem rodičovského prvku a jeho potomka (případ „c“), pokud má rodič na příslušné straně výplň i rámeček nulové šířky. Může to pak znamenat i zvětšení rodičova okraje.

Pozor! Prolínání se týká jen horních a dolních okrajů. Levé a pravé okraje se neprolínají. Prolínání se také vztahuje jen na normálně umístěné bloky. Bloků speciálně umístěných (absolutně, relativně,...) se netýká.

Podívejte se na příklad prolínání okrajů.