Margin

CSS vlastnost margin určuje šířku vnějšího okraje prvku.

margin
hodnoty vnější okraj
délka vzdálenost mezi případným rámečkem a okolním dokumentem
procento tatáž vzdálenost vypočítaná z rozměrů omezujícího nadřazeného prvku
auto automatické nastavení okrajů tak, aby protilehlé byly stejné (nefunguje v IE 6 ve quirk módu)
a b c d a = horní, b = pravý, c = spodní a d = levý vnější okraj (viz zadávání stran), kde abcd je nějaká výše uvedená hodnota
nezadáno (inherit) prvek nemá žádné vnější okraje, nebo je má nastavené podle html tagu na výchozí hodnotu

Margin je vnější okraj. Vnitřní okraj je padding. Margin je okraj od rámečku ven, padding od rámečku dovnitř. Pod paddingem se vykresluje pozadí, pod marginem ne.

Margin se může zadávat jednou hodnotou najednou pro všechny čtyři strany, nebo se vypíše více hodnot pro různé strany. Existují varianty margin-top, margin-right, margin-bottom a margin-left určené jen pro zadání jedné strany vnějšího okraje. Mají stejné hodnoty.

Varianty vlastnosti margin
varianta význam

margin-top

horní okraj
margin-left levý okraj
margin-bottom spodní okraj
margin-right pravý okraj

Lze zadávat i záporné hodnoty, prvek se pak bude posouvat na druhou stranu, jako kdyby měl relativní pozici.

Podpora

Podpora vlastnosti margin
Prohlížeč Podpora ve verzích Poznámka

Internet Explorer

od verze 7 správně Ve velmi starých verzích se často vyskytovaly bugy nebo nedokonalá podpora. Některé příklady na této stránce jsou poplatné oné době.
Firefox všechny verze  
Chrome, Opera všechny verze  

Některé staré prohlížeče uměly margin nastavit řádkovým prvkům, což je špatně. Pokud chcete margin nastavit prvkům, které potřebujete na řádce, nastavte jim display: inline-block.

Slučování vertikálních okrajů (margin collapsing)

Slučování okrajů po sobě jdoucích prvků

Nechť jsou za sebou dva prvky. První prvek má spodní okraj (margin-bottom) 40px a druhý má horní okraj 20px. Jaká bude mezi nimi mezera?

Ne, nebude to 60px. U vertikálních marginů, které jdou po sobě, platí, že se sloučí a použije se jenom ten větší:

40px + 20px = 40px

Prostě se z nich vezme maximum.

Příklad:

<div style="margin-bottom: 40px; height: 40px; outline: 1px solid blue;">první div se spodním marginem 40px a výškou 40px</div>
<div style="margin-top: 20px; outline: 1px solid blue;">druhý div s horním marginem 20px</div>

Naživo:

první div se spodním marginem 40px a výškou 40px
druhý div s horním marginem 20px

Jak je vidět, mezera mezi oba divy má stejnou výšku jako výška prvního divu (nastavil jsem ji záměrně stejně, pro porovnání), tedy 40 pixelů. Ne 60 pixelů. Sousední vertikální marginy se nesčítají, ale bere se maximum.

Možná už jste si všimli, že přesně takhle se chovají odstavce, tedy tagy <p>. Tag <p> má v prohlížeči nastavený výchozí styl margin-top: 1em; margin-bottom: 1em;. Když jsou 2 tagy <p> pod sebou, tak si můžete všimnout, že mezi nimi není mezera 2em, ale jenom 1em.

Záporné hodnoty se ale neslučují. Sčítají se a odčítají. Tedy je-li alespoň jeden z marginů záporný, nebere se maximum, nýbrž se ten obě hodnoty marginu sečtou.

Horizontální marginy dvou prvků, které jsou nějak vedle sebe (ne pod sebou), se neslučují. Horizontálních marginů (pravého a levého) se slučování nijak netýká.

Slučování okrajů zanořených prvků

<div style="margin-top: 40px;">
    <div style="margin-top: 20px;">
        obsah zanořeného divu, který bude mít horní okraj 40px
    </div>
</div>

Asi tušíte, že situace bude podobná. Horní margin obou zanořených divů nebude součtem jejich horních marginů, ale opět maximum, tedy 40px. Samozřejmě ten zanořený prvek musí být bezprostředně prvním potomkem.

Úplně stejná situace by byla u spodního okraje (margin-bottom). Spodní okraj je opět maximem ze spodního okraje nadřazeného divu a spodního okraje posledního potomka.

I zde platí, že záporné marginy se neslučují.

Padding či border nadřazeného prvku ruší slučování

Existuje ale situace, která slučování okrajů zanořených prvků rozbije. Stačí nadřazenému prvku dát padding nebo border. (Přesněji: horní padding nebo horní border u horního marginu, spodní varianty u spodního marginu.) Je to docela logické hlavně v případě rámečku. Jestliže chci oba prvky oddělit rámečkem, pak pravděpodobně chci nastavený okraj mít jak pod rámečkem, tak nad ním.

<div style="margin-top: 40px; border: 1px solid gray;">
    <div style="margin-top: 20px;">
        obsah zanořeného divu, který bude mít horní okraj 60px. 20px pod rámečkem a 40px nad rámečkem.
    </div>
</div>

Obsah zanořeného divu, který bude mít horní okraj 60px. 20px pod rámečkem a 40px nad rámečkem.

Kdyby tam ten rámeček nebyl, horní margin by se sloučil pouze na 40px.

Výchozí margin html prvků

Prohlížeče mají nastaveno, že některé html tagy formátují odlišně od běžného textu, i když nemají nastaven žádný styl. Tomu se říká výchozí styl (default stylesheet). Výchozí styl nejčastěji nastavuje velikost písmen nebo právě margin.

příklady výchozích okrajů některých tagů
tag spodní a horní margin pravý a levý margin
body 8px 8px
p 16px (1em) 0px
div 0px 0px
blockquote 16px (1em) 40px

Podobné vlastnosti k margin

Padding je vnitřní výplň. Vypadá podobně jako margin, ale liší se v některých věcech, viz výše.

Shape-margin je nastavení okrajů obtékaným tvarům, probírám to u vlastnosti float a shape-outside.

Position: relative je běžný způsob, jak něco někam trochu posunout bez toho, aby se tomu nastavovaly okraje.

Text-indent je odsazení prvního řádku, typicky v odstavci.

Příklady

Dva zápisy okraje nadpisu

Dobrý nápad je pohrát si s nastavením horního a dolního okraje u nadpisů (tagy <h1> až <h6>). Například nadpis druhé úrovně <h3> se používá ve většině textů a zpravidla vypadá lépe, pokud je nad ním větší prostor než pod ním.

<style>
h2 {margin-top: 1.5em; margin-bottom: 0.5em}
</style>

Jak je vidět, použil jsem jednotku em (odpovídá velikosti velkého písmena M), aby se velikosti okrajů zvětšovaly a zmenšovaly s písmem. V příkladu jsem použil varianty vlastnosti margin margin-top = horní okraj a margin-bottom = dolní okraj. Dá se to zapsat celé jenom pomocí vlastnosti margin:

<style>
h2 {margin: 1.5em 0px 0.5em 0px}
</style>

a výsledek by měl být totožný s předchozím zápisem. Jak je vidět, margin dovoluje zapsat všechny čtyři strany najednou. V praxi to ale považuji za méně šikovné, takže doporučuji používat zápis margin-strana, tedy pokud zrovna extrémně nešetříte data.

Předefinování vzhledu tagu

Jiný příklad se týká tagu <blockquote>. Sémanticky (významově) označuje blokovou citaci, graficky jej prohlížeče vykreslují jako odstavec s velkým levým a pravým okrajem, kvůli čemuž se tag <blockquote> nevhodně používá na odsazování. Následující příklad dělá dvě věci: 1. zmenšuje odsazení tagu <blockquote> na polovinu (normálně je to 40px), 2. deklaruje třídu .odsazena, která se může použít na odstavec nebo oddíl pro odsazení zleva:

<style>
blockquote {margin-left: 20px; margin-right: 20px}
.odsazena {margin-left: 40px}
</style>

Zrušení výchozích okrajů

Stejně jako má tag blockquote předdefinované okraje zleva a zprava, má spousta dalších html tagů předdefinované okraje shora a sdola. Někdy je to dost nepříjemné, protože mezery (obvykle ve výšce jednoho řádku) dělají na stránce pěkné díry. Proto na začátek stylů mnohých stránek píšu deklaraci, která (pokud později nestanovím jinak) vymaže toto výchozí (neboli defaultní) margo u tagů form, ul, ol, a p:

<style>
form, ul, ol, p {margin: 0px}
p {margin-top: 2px}
</style>

řádek p {margin-top: 2px}přitom znamená, že horní okraj tagu <p> chci mít přece jenom alespoň dvoupixelový.

Okraje obrázku

Když se použije za margin: jenom jedna hodnota, vztahuje se na všechny čtyři strany. Příklad přidání okraje obtékanému obrázku:

<img src="fotka.jpg" width="200" height="150" style="float: right; margin: 8px">

obrázek bude mít na všech stranách okraj velikosti osmi pixelů.

Vycentrování bloku

Úzké bloky, který mají pravé i levé margo nastavené na hodnotu auto, by se měly v dokumentu vystředit:

<div style="margin: 0px auto; width: 400px">
  nějaký vystředěný obsah
</div>

Vizte též jak vycentrovat celou stránku. Velmi podobný příklad centrování

Simulace relativní pozice

Když potřebuji něco posunout nahoru nebo doleva, často pomůže relativní pozice. Když ale nemůžu do kódu přidávat tagy, velmi často se dá relativní pozice simulovat zápornými hodnotami margin-top a margin-left.

Vystředění prvku pomocí absolutní pozice (simulace relativní pozice marginem).

Další příklady

Centrovaný CSS pozicovaný design

Neklikací odkaz v IE 6 strict (float + záporný margin)

Bug absolutního pozicování s marginem

Definice česky vypadajícího odstavce

Bug float + margin-left pro Internet Explorer

Bug margin-top v IE 6, pokud je předchozí prvek absolutně pozicovaný.

Bug Exploreru - ignorovaný margin u prvníh potomka prvku s rámečkem.

Stránka vytvořena v roce 2003, poslední aktualizace 18. 2. 2016

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.