CSS
101
Konqueror je tentokrát ve vzácné shodě s Internet Explorerem. Rovněž má problém s vykreslením okrajů u řádkového prvku. V tabulkách pak nefunguje výplň (padding) prvku <table>. Stejně jako Internet Explorer neumí vkládat obrázky pomocí značky <object data=“xyz“>. Je třeba počítat s tím, že dle konkrétní situace se mohou vyskytnout problémy s korektní podporou okrajů a výplní prakticky ve všech prohlížečích (snad s výjimkou Opery 7+). Proto znovu upozorňuji na nutnost otestování v co největším počtu různých prohlížečů. S ohledem na Internet Explorer a Konqueror zatím raději nepoužívejte rámečky u řádkových prvků.
Okraje, výplň a orámování lze definovat pro každou stranu zvlášť, takže jejich vzhled může být na každé straně jiný. Rozměry okrajů, orámování a výplní se vždy připočítávají k vnitřním rozměrům, daným vlastnostmi width nebo height, a součet tvoří vnější rozměry prvku.
Pokud se zadíváte na výše uvedené obrázky pozorně, můžete si povšimnout, že některé prohlížeče vykreslily dolní okraj u řádkových nahrazovaných prvků (obrázky) širší. Není to však jen spodní okraj, ale součet spodního okraje a výšky řádek (line-height). Je tomu tak proto, že jakýkoliv vložený (nahrazovaný) řádkový prvek je především řádkový, a vztahuje se tudíž na něj většina vlastností řádkových prvků. Vyřešit tento problém lze dvěma způsoby:
ozornění Up
známka Po
známka Po
Můžeme prvek změnit na blokový změnou jeho vlastnosti display na hodnotu block.
5.2 Okraje – vlastnost margin Okraje kolem prvku definuje skupina vlastností margin. Okraje jsou vždy průhledné. Procentní hodnoty se vždy vztahují k šířce omezujícího bloku. U nenahrazovaných řádkových prvků se horní a dolní okraje ignorují. Okraje mohou být i záporné.
Okraje, výplně a rámečky
Můžeme nastavit jeho rodičovskému (obsahujícímu) prvku vlastnost line-height na hodnotu 0. Tento způsob nefunguje v Internet Exploreru, kde musíme nastavit vlastnost font-size takéž na hodnotu 0, toto však pro změnu nefunguje v Mozille. Naštěstí lze obě vlastnosti zkombinovat line-height:0; font-size:0. Takto prvek zůstane řádkový, avšak v obsahujícím prvku nelze např. obrázky kombinovat s textem (ledaže bychom text uzavřeli např. do prvku <span> a tento předefinovali).
Sdružená vlastnost margin definuje všechny čtyři okraje současně, a to pomocí jedné až čtyř hodnot, oddělených mezerami. Je-li zadána pouze jedna hodnota, aplikuje se na všechny čtyři strany. Pokud jsou zadány hodnoty dvě, první se vztahuje na horní a dolní okraj, druhá na pravý a levý. Při třech zadaných hodnotách se první vztahuje na horní, druhá na pravý a levý, a třetí na dolní okraj. A konečně, pokud jsou zadány hodnoty čtyři, tyto budou aplikovány po řadě na horní, pravý, dolní a levý okraj.
5.2 Okraje – vlastnost margin
Ukázka elektronické knihy, UID: KOS180659
102
CSS
Kromě toho lze používat čtyři vlastnosti, specificky ovlivňující jednu konkrétně určenou stranu – margin-top (horní), margin-right (pravou), margin-bottom (dolní) a margin-left (levou). .div_1 { margin: 10%; } .div_1 { margin-top: 20px; } Výše uvedený příklad nejprve nastavil okraj u všech čtyř stran na 10 %, a následně pak přenastavil horní okraj na 20 px. Mohli bychom nastavit šířku okraje pro každou stranu zvlášť, ale tento způsob zápisu je kratší. vlastnost
možné hodnoty
výchozí procenta
dědičnost ovlivňuje
margin-top
auto | <délka> | <procenta>
0
ne
margin-bottom
relativně k šířce omezujícího bloku
margin-right
všechny kromě nenahrazovaných řádkových prvků všechny
margin-left margin (sdružená vlastnost)
<auto> | <délka> (1-4) | <procenta> (1-4)
viz dílčí vlastnosti
Slučování okrajů Okraje sousedních blokových prvků se slučují a výsledný okraj pak odpovídá většímu z obou okrajů. Při záporných hodnotách se na tyto hledí jako na nulové. Okraje se neslučují u plovoucích a absolutně poziciovaných prvků.
Obr. 5.7: Slučování okrajů
Ve většině případů nejsou se slučováním okrajů žádné problémy. Výjimkou jsou tabulky, kde se prohlížeče různí. Na následujících obrázcích vidíte, jak stejný kód zpracují Opera 7 a Mozilla 1. Všem prvkům (tabulkám i odstavcům) byl nastaven horní i dolní okraj na 10 px.
5. Okraje, výplně a rámečky
Ukázka elektronické knihy, UID: KOS180659
CSS
103
Obr. 5.9: Slučování okrajů (Mozilla 1.6 / Linux)
V Opeře 7 se všechny okraje sloučily, vzdálenost mezi jednotlivými prvky činí 10 px. V Mozille 1 došlo ke sloučení okrajů pouze mezi odstavci, a jejich vzdálenost je rovněž 10 px. Ovšem okraje mezi odstavci a tabulkami se nesloučily, nýbrž sečetly, a vzdálenost tak činí plných 20 px. Naštěstí existuje velice jednoduchý postup, jak docílit stejného vzhledu ve všech prohlížečích. Stačí nastavit požadovanou šířku pouze jednomu okraji a protilehlému nastavit šířku nulovou. Výše uvedený příklad tedy jednoduše ošetříme takto:
Okraje, výplně a rámečky
Obr. 5.8: Slučování okrajů (Opera 7.23 / Linux)
p, table { margin-top: 10px; } p, table { margin-bottom: 0; } Jestliže blokový prvek nemá horní, popř. dolní výplň, ani rámeček, slučuje se obdobným způsobem i jeho horní (dolní) okraj s horním (dolním) okrajem blokového potomka.
5.2 Okraje – vlastnost margin
Ukázka elektronické knihy, UID: KOS180659