MARGIN – css vlastnost prázdný prostor kolem elementu

Margin vytváří neviditelný prostor kolem jakéhokoli HTML elementu, jakým může být <div>, <img>, <h1>, <p>... nebo jakýkoli jiný element. Margin vytvoří prostor, který nebude vyplněn pozadím samotného elementu a bude vidět pozadí nadřazeného elementu.

Existuje v CSS 1, 2 a 3 | není dědičný | dobře podporován všemi moderními prohlížeči

Hodnoty vlastnosti MARGIN

• 1px – číselné v pixelech, pixel je obrazový bod a při tvorbě webových stránek se používá nejčastěji
• 1% – číselné v procentech, která není absolutní (neměnná), prohlížeč rozměr dopočítá vůči nadřazenému HTML elementu
• auto – automaticky se dopočítá, a proto není absolutní, pokud nastavíte nějaký element o definované šířce (např. DIV) vlevo a vpravo na hodnotu "auto", pak bude element vždy přesně uprostřed, protože se vlevo i vpravo prohlížeč dopočítá stejný rozměr
• 1mm – číselné v milimetrech, používá se pro tisk, který se udává v metrické soustavě
• 1cm – číselné v centimetrech, používá se pro tisk, který se udává v metrické soustavě
• 1in – číselná v palcích (1in = 2,54cm) a užívá se pro tisk tam, kde se počítá v palcích
• 1pt – číselná v typografických bodech (1/72 palce), které se používají u fontů
• 1pc – číselná pica což je 12px
• 0 – u nuly není nutné psát hodnotu 

Způsob zápisu

Mezery mohou být celkem čtyři (nahoře: top, vpravo: right, dole: bottom, a vlevo: left). Pokud byste chtěli definovat pouze horní mezeru, může zápis vypadat následovně:

selektor {
   margin-top: 5px;
}

Můžete provést i zjednodušený zápis. Pokud např. mají být všechny mezery stejné, může zápis vypadat takto:

selektor {
   margin: 5px;
}

Stává se, že potřebujete mít jeden rozměr nahoře a dole, ale jiný vlevo a vpravo, pak je možné zapsat prvním číslem horní / dolní a druhým číslem levý / pravý rozměr. Zápis může vypadat takto:

selektor {
   margin: 5px 8px;
}

Když potřebujete zapsat každý rozměr jiný, je snazší psát jednu hodnotu za druhou. První je hodnota znamená nahoře a další hodnoty jdou po směru hodinových ručiček, tedy první nahoře, druhá vpravo, třetí dole, čtvrtá vlevo. Zápis může vypadat takto:

selektor {
   margin: 1px 2pt 3% 4in;
}

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla