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
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
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.
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
- Jsou odděleny rámečkem.
- Pod paddingem se zobrazuje pozadí objektu, pod marginem ne (ve skutečnosti se to dá řídit CSS vlastností background-origin).
- Margin se umí slučovat. Dotýkají-li se navzájem některé okraje, dojde k jejich sloučení. Více o tom u vlastnost Margin ve slučování okrajů.
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
|
|
|
||||||||||||
| <table border="1" cellpadding="6" cellspacing="0"> | <table border="1" cellpadding="0" cellspacing="6"> | <table border="1" cellpadding="6" cellspacing="6"> |
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í.
- Buňkám tabulek vždy nastavujte vnitřní okraj, aby se text nelepil na rámeček. Lze to udělat i stylem padding pro td.
- Dávejte pozor, ať není text nalepený na okraje okna.
- Často nastavuji levý okraj tagu body. Potom se může vlevo vykreslit něco na pozadí nebo -- pokud bude okraj větší -- umístit do něj absolutně pozicované menu.
- Máte-li na stránce víc obrázků, oddělujte je nějakým prostorem.
- Zajímavé je, že plovoucí elementy (obrázky například) se umísťují do marga jiných elemetů. Například pokud máte obrázek plovoucí vpravo a za ním odstavec s pravým margem, obrázek se zarovná ke kraji dokumentu.
- A určitě přijdete na další.
Poslední aktualizace 18. 2. 2016
Reklama
