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

V HTML 3.2 existujφ u tagu <img> mo╛nΘ atributy vspace a hspace. Nap°φklad

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φ.