Okraje objektů - margin a padding

Pojmy - Nákres - Rozdíly mezi padding a margin - Zápis CSS - Okraje obrázků postaru - Okraje buněk - Okraje těla - Praktické použití

Kdo hodně používá tabulky a pozadí nebo dělá rámečky kolem obrázků nebo odstavců, musí pochopit rozdíl mezi vnitřním a vnějším okrajem elementu. Používá se 

  1. v CSS
  2. u tabulek
  3. zastarale u obrázků a těla dokumentu

Ve všech případech se to deklaruje trochu jinak, ale logika je stejná.

Pojmy

Rozlišujeme dva druhy okrajů: vnitřní a vnější. Vnitřnímu okraji se anglicky a webově říká padding (česky též výplň), vnějšímu margin. Mezi paddingem a marginem se zobrazuje rámeček (border). U tabulek se namísto padding a margin objevují pojmy cellpadding (vnitřní okraj buněk) a cellspacing (vnější), což jsou atributy tagu <table>.

česky anglicky a v CSS u buněk tabulky
vnější okraj margin cellspacing
vnitřní okraj padding cellpadding
rámeček border border

Všeříkající nákres

Různé druhy okrajů objektu

Kdysi dávno, když vznikal tento web, se v Quirk módu Internet Exploreru vyskytoval jiný význam šířky v CSS. IE do šířky počítal i border a padding (tedy jako když dnes nastavíme box-sizing: border-box). Od Internet Exploreru 7 už to neplatí, proto tento obrázek berte jako historickou vsuvku.

Chybná interpretace šířky v IE

Lze nastavit, že se padding a rámeček bude počítat do šířky. Dělá se to pomocí CSS vlastnosti box-sizing s hodnotou border-box.

Rozdíly mezi padding a margin

Zápis v CSS

Okraje objektů se zapisují jako všechny CSS vlastnosti. Např:

<p style="margin: 20px; padding: 10px">

udělá odstavec s okraji. K dispozici jsou všechny možné délkové jednotky. Je dobré připomenout, že na rozdíl od většiny jiných CSS vlastností se okraje nedědí, což je ovšem většinou logické.

Každý okraj jiný

CSS ale navíc umožňují udělat na každé straně elementu rozdílné okraje. K dispozici jsou vlastnosti
margin-top, margin-right, margin-bottom, margin-left,
padding-top, padding-right, padding-bottom, padding-left
.

Význam je, doufám, jasný.

Hromadné zadávání

Chcete-li šetřit klávesami, můžete zadat různé okraje jednou deklarací. Například zápis

margin: 4px 8px 2px 18px

je ekvivalentní s

margin-top:4px; margin-right:8px; margin-bottom: 2px; margin-left:18px.

Hodnoty se tedy uvádějí v pořadí horní, pravá, dolní, levá. Platí stejně pro padding i margin (a navíc border). Pokud je hodnot méně než čtyři, pak chybějící údaj přebírá hodnotu protilehlé strany.

Okraje obrázků po staru

V HTML 3.2 existovaly u tagu <img> možné atributy vspace a hspace. Například

<img border="0" hspace="3" vspace="4" src="obrazek.gif" >

Hspace udělal okraj na levé a pravé straně (horizontální), vspace je vertikální. Nejsem si tím jistý, ale myslím si, že v definici HTML 4.0 už tyto atributy nejsou, proto je doporučuji nepožívat, protože se dají nahradit styly:

<img style="border: 0px; margin: 4px 3px;" src="obrazek.gif" >

Okraje buněk tabulky v příkladech

bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
<table border="1" cellpadding="6" cellspacing="0"> <table border="1" cellpadding="0" cellspacing="6"> <table border="1" cellpadding="6" cellspacing="6">

Schéma okrajů v tabulce

Přibližně od roku 2010 lze doporučit nastavovat cellpadding pomocí css vlastnosti padding a cellspacing pomocí vlastnosti border-spacing:

<style>
td {
    padding: 12px;
    border-spacing: 20px;
}
</style>

Mně osobně přijde hezké v tabulkách nenastavovat border-spacing (cellspacing) žádný a dokonce nechat spojovat rámečky sousedních buněk. Dělá se to pomocí stylu border-collapse: collapse; nastavuje se tabulce:

<style>
table {border-collapse: collapse;}
td {border: 1px solid gray; padding: 1em;}
</style>

Okraje těla

Tělo dokumentu, tag <body>, má v prohlížečích nastaven výchozí margin velký 8 pixelů. Není to nikde uvedeno, ale prohlížeče se tak prostě chovají.

Je to asi kvůli tomu, aby se neostylovaný text nelepil na okraje okna, což by mohlo vést k jeho horší čitelnosti. Při stylování stránek je potřeba s tímto faktem počítat a nezlobit se na prohlížeče, že tam ten okraj dělají. Pokud vám bude při stylování stránky výchozí okraj tagu body vadit, můžete ho vynulovat:

<style>
body {margin: 0px;}
<style>

Pak je ale samozřejmě potřeba ošetřit, aby se případný text nelepil na okraje okna. Nejčastěji se to dělá tak, že se nějakému zanořenému prvku nastaví margin nebo padding.

Já osobně často nuluji pouze horní margin, aby se mi dobře stylovalo logo a hlavička stránky. Ostatní okraje nechávám většinou na výchozí osmipixelové hodnotě:

body {margin-top: 0px;}

Praktické použití

Okraje elementů doporučuji používat s rozmyslem. Existuje ale pár dobrých tipů pro jejich použití.

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í

Základy Prvky stránek Tvorba webu

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