Okraje objektů - margin a padding

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

Pojmy

Rozlišujeme dva druhy okrajů: vnitřní a vnější. Vnitřnímu okraji se anglicky a webově říká padding, 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

Rozdíly mezi padding a margin

Okraje buněk tabulky v příkladech

Zápis v CSS

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ý. Horší už je podpora těchto vlastností v prohlížečích, jmenovitě v Netscape 4.

Hromadné zadávání

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

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. Podporu těchto vlastností nemám odzkoušenou, pravděpodobně bude opět chybovat v NN 4.

Okraje obrázků po staru

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.

Okraje těla po staru

Nastavení horního a levého okraje stránky. Bylo oblíbené zejména u autorů používajících rámy. V HTML 4.0 už to není, ale prohlížeče topmargin a leftmargin podporují.

Praktické použití

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