Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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 v CSS pro HTML element - Základy CSS3

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:

Neviditelné okraje prvku
index.html

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.


 

Předchozí článek
Kvíz - Text a písmo podruhé, seznamy a tabulky v CSS3
Všechny články v sekci
Základy CSS3
Přeskočit článek
(nedoporučujeme)
Okraje a rámečky v CSS3
Článek pro vás napsal Jakub Raida
Avatar
Uživatelské hodnocení:
77 hlasů
Autor má rád literaturu, dějiny, filmy, počítačové hry, paleontologii, vesmír a programování.
Aktivity