MENU

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

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548