Při tvorbě webových stránek rozlišujeme dva typy okrajů HTML elementů:

• vnější okraj - vzdálenost mezi ohraničením daného prvku a ohraničením jiného prvku
• vnitřní okraj - vzdálenost mezi obsahem elementu a jeho ohraničením

Základním rozdílem mezi těmito okraji je vykreslování pozadí. Pod vnějším okrajem se pozadí elementu nevykresluje, naopak pod vnitřním okrajem ano.

Vnější okraj

margin

• nejčastěji se definuje vnější okraj v pixelech (lze ho definovat i v jiných jednotkách)
• hodnota okrajů se zapisuje po směru hodinových ručiček od horního okraje (top), dále pravý okraj (right), spodní okraj (bottom) a poslední levý okraj (left)

obecný zápis: selektor {margin: top right bottom left}

selektor {margin: 10px 15px 5px 20px}

Nastaveno bude: horní okraj 10 pixelů, pravý okraj 15 pixelů, spodní okraj 5 pixelů, levý okraj 20 pixelů.

• pokud nastane situace, kdy potřebujete nastavit shodné okraje horní a dolní okraji nebo pravému a zároveň levému okraji, lze to zapsat zkráceně

obecný zápis: selektor {margin: top/bottom left/right}

selektor {margin: 10px 15px}

Nastaveno bude: horní okraj 10 pixelů, pravý okraj 15 pixelů, spodní okraj 10 pixelů, levý okraj 15 pixelů.

• pokud nastane situace, kdy potřebujete nastavit shodné okraje pro všechny strany, lze to zapsat pouze jednou hodnotou

obecný zápis: selektor {margin: top/right/bottom/left}

selektor {margin: 20px}

Nastaveno bude: horní okraj 20 pixelů, pravý okraj 20 pixelů, spodní okraj 20 pixelů, levý okraj 20 pixelů.

Vodorovné zarovnání obsahu na střed

• u pravého a levého okraje lze použít i hodnotu "auto", kdy budou vnější okraje automaticky dopočítány podle šířky nadřazeného prvku (okno prohlížeče, atd.)
• toto se používá například při vycentrování blokových elementu na střed stránky, když nefunguje vlastnost text-align

selektor {margin: 0px auto}

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

• vlastnosti pro jednotlivé vnější okraje
• zapisuje se pouze jedna hodnota

selektor {margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;}

je totožné jako

selektor {margin: 10px 15px 20px 25px}

Vnitřní okraj

padding

• zapisuje se též nejčastěji v pixelech
• pravidla zápisu jsou totožná se zápisem vnějšího okraje "margin" (viz výše)

selektor {padding: 10px 15px 5px 20px}

selektor {padding: 10px 15px}

selektor {padding: 20px}

padding-top, padding-right, padding-bottom, padding-left

• úplně stejné jako v případě vnějšího okraje

selektor {padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px;}

je totožné jako

selektor {padding: 10px 15px 20px 25px}

Blokový model CSS

Dále je důležité si uvědomit celkové rozměry blokového HTML prvku, kterému nastavíme vnější okraj, vnitřní okraj a navíc ohraničení.

Vysvětlíme si na příkladu:
Pokud nastavíte např. obrázku šířku (width) 400 pixelů, přidáte vnitřní okraj (padding) 10 pixelů, ohraničení (border) 5 pixelů a vnější okraj (margin) 20 pixelů, výsledná celková šířka, kterou HTML prvek zabere na stránce, bude součet těchto hodnot, tedy 470 pixelů !!! (levý vnější okraj 20 px + levé ohraničení 5 px + levý vnitřní okraj 10 px + šířka 400 px + pravý vnitřní okraj 10 px + pravé ohraničení  5 px + pravý vnější okraj 20px).

V praxi to znamená, že pokud máte omezený prostor na umístění blokového HTML prvku (např. šířka 400 pixelů), musíte zmenšit šířku daného HTML prvku o součet vnějšího, vnitřního okraje a ohraničení (v našem příkladu o 70 pixelů na výsledných 330 pixelů).

Obr. 1: Zvětšení rozměrů při použití okrajů a ohraničení.

Chybná interpretace vlastnosti width v Internet Exploreru

Internet Explorer chybně počítá celkové rozměry v blokovém modelu CSS tak, hodnoty ohraničení (border) a vnitřního okraje (padding) započítává do šířky (width), místo toho, aby je přípočítával k šířce.

Příčinou je to, že IE má jako výchozí nastaven nestandardní mód zobrazení (tzv. quirk mód). Ostatní prohlížeče (Firefox, Chrome, Opera) mají jako výchozí tzv. standardní mód, který správně interpretuje šířku (width).

Řešením je změna typu HTML dokumentu <!DOCTYPE> úplně na prvním řádku HTML kódu.

Standardní mód zobrazení

<!DOCTYPE HTML PUBLIC>

Nestandardní mód (quirk mód)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Úkol

• Ve složce WWW si vytvořte složku 16.
• Ze složky 15 si zkopírujte všechny potřebné soubory.
• Soubory HTML upravte podle následujícího:
  • veškerý obsah (vymezen značkou BODY) "obalte" novým oddílem DIV a přiřaďte mu vlastní identifikátor s názvem "obal"
• Soubor style.css upravte takto:
  • přidejte na konec komentář "CV16"
  • nadpisu 1. úrovně nastavte horní a dolní vnitřní okraj na 5 pixelů,
  • všem odstavcům nastavte vnější okraj na 10 pixelů,
  • identifikátoru "obal" nastavte horní a dolní vnitřní okraj na 5 pixelů a pravý a levy vnitřní okraj na 20 pixelů,
• Zkontrolujte na případné chyby a uložte.