Lekce 12 - Okraje prvků: margin a padding v CSS3

V předchozím kvízu, Kvíz - Text a písmo podruhé, seznamy a tabulky v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V této lekci se podíváme na důležitou věc při formátování HTML stránky v jazyce CSS3, a to sice neviditelné okraje okolo prvků, které se nastavují CSS vlastnostmi margin a padding. Tyto okraje nejdou vidět, takže jde vlastně o způsob, jakým odsadit daný prvek od ostatních či obsah prvku od okrajů prvku, čímž docílíme stránky, na níž nejsou prvky na sobě ošklivě nalepené a příliš úsporné, ale která naopak působí vzdušně a tak akorát prostorově "velkoryse". V tom, že tyto okraje nejsou vidět, se liší od rámečku (border).

Box model

Na úvod si vysvětlíme rozdíl mezi vnějším (margin) a vnitřním (padding) okrajem. Pomocí CSS3 vlastnosti margin nastavujeme okraj elementu, tedy vzdálenost mezi rámečkem a okolím elementu. Pomocí CSS3 vlastnosti padding potom nastavujeme vzdálenost mezi rámečkem a obsahem elementu.

Margin a padding jsou spolu s vlastností border součástí tzv. box modelu (občas překládáno jako "krabičkový model").

Box model znázorňuje pozici těchto 3 vlastností okolo obsahu HTML elementu. Můžeme nastavovat okraje mezi rámečkem a okolím nebo obsahem elementu a rámečkem.

Ani jeden okraj se nepočítá do velikosti elementu. Pokud tedy nastavíme margin na 10px, border na 5px a padding na 10px na elementu s šířkou 100px, bude jeho výsledná šířka 150px.

Margin (vnější okraj)

Margin nastaví všechny 4 okraje (levý margin, pravý margin, dolní margin i horní margin) na stejnou velikost. Pokud chceme mít každý vnější okraj jiný, můžeme (místo všeobecné vlastnosti margin) použít tyto vlastnosti:

• margin-left - Levý vnější okraj.
• margin-right - Pravý vnější okraj.
• margin-top - Horní vnější okraj.
• margin-bottom - Dolní vnější okraj.

Padding (vnitřní okraj)

Padding nastaví všechny 4 vzdálenosti (levý padding, pravý padding, dolní padding i horní padding) na stejnou velikost. Pokud chceme mít vnitřní okraj jiný, můžeme (podobně jako u margin) použít tyto vlastnosti:

• padding-left - Levý vnitřní okraj.
• padding-right - Pravý vnitřní okraj.
• padding-top - Horní vnitřní okraj.
• padding-bottom - Dolní vnitřní okraj.

Ukázka ostylování okraje elementu

Mějme CSS kód:

#kontejner
{
    border: 1px solid blue;
    background-color: #BDBDF8;
    margin: 40px;
    padding: 20px;
    width: 300px;
    height: 100px;
}

A k tomu HTML:

<div id="kontejner">
Mezi rámečkem a okolím je okraj `40px` a mezi tímto textem a rámečkem je okraj `20px`. Pozadí se vykresluje až k rámečku.
</div>

Výsledek:

Poměrně jednoduché, že? Nezapomeňme, že správná velikost vnitřních i vnějších okrajů je otázkou citu, vkusu a zkušenosti. Je třeba experimentovat s různými velikostmi odsazení a zkoušet, co na nás jak působí. Příliš natěsnané prvky působí skličujícím dojmem a chaoticky, příliš velké a extrémně odsazené zase vyvolávají pocit plýtvání místem a "rozsypanosti" stránky

V další lekci, Okraje a rámečky v CSS3, si ukážeme, jak pracovat se vzhledy okrajů, jaké jim lze nastavit barvy, velikost a styl.