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