Margin

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

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. Pokud se u prvku nepoužívá rámeček nebo pozadí, je lepší používat margin spíše než padding, protože se v obou vykreslovacích módech a v různých prohlížečích počítá stejně.

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.

Při zadání jednoho okraje se prvek posune, jako by měl relativní pozici. Lze zadávat i záporné hodnoty, prvek se bude posouvat na druhou stranu. Není to moc "čistý" postup, ale funguje.

Podpora

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ě <h2> 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ů. Jedná se o efektivní náhradu zastaralých html atributů hspace a vspace.

Vycentrování bloku

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

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

to ale nefunguje v Internet Exploreru. Pro Explorer je nutno vystředění realizovat pomocí text-align a dvou zanořených bloků:

<div style="text-align: center">
 <div style="text-align: left; width: 400px">
  nějaký vystředěný obsah
 </div>
</div>

Když se to spojí dohromady, vyjde z toho vycentrování prvku funkční v naprosté většině prohlížečů:

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

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

Vizte též

Padding = vnitřní okraj, Border = rámeček prvku, Width = šířka prvku, Height = výška prvku, Text-indent = odsazení prvního řádku, Délky v CSS

Odkazy

Okraje objektů - margin a padding