Okraje

Naše karty se navzájem dotýkají. Mezery mezi prvky vytváří okraj (margin): volné místo vně rámečku, jako mezera mezi dvěma obrazy na zdi.

margin: 20px;

Stejně jako polstrování můžete okraj nastavit na všech stranách najednou, nebo na každé straně zvlášť pomocí margin-top, margin-right, margin-bottom a margin-left.

Jaký je rozdíl mezi polstrováním a okrajem? Polstrování je uvnitř rámečku a vyplňuje ho pozadí prvku. Okraj je vně rámečku a je vždy průhledný: prosvítá jím pozadí rodiče.

Některé prvky mají okraj už ve výchozím nastavení prohlížeče. Nadpisy a odstavce mají okraj nahoře a dole, proto jsou mezi nimi mezery, i když jsme žádné nenastavili. Prvek body má okraj 8 pixelů na všech stranách, a proto zelená plocha s nadpisem nesahá až ke krajům náhledu.

Když je hodnota nulová, nemusíte psát jednotku: margin: 0 je nula v jakékoli jednotce.