Abychom správně pochopili všechny vlastnosti, které ovlivňují formátování stránky, musíme se seznámit s formátovacím modelem, který je v CSS používán. V tomto modelu je výsledkem zobrazení každého elementu jeden nebo několik obdélníkových boxů. Všechny boxy se skládají ze samotného obsahu elementu. Kromě toho mohou obsahovat vnitřní okraj, rámeček a vnější okraj (viz obr. 37 – „Formátovací model“).
K nastavení velikosti vnějšího okraje slouží vlastnosti
začínající na margin. Obdobně k nastavení
velikosti vnitřního okraje slouží vlastnosti začínající na
padding. U rámečku lze kromě jeho velikosti
nastavit i barvu (border-color) a styl
(border-style). Přehled všech těchto vlastností
přinášejí tabulky ???, ??? a ???.
Mnoho z výše uvedených vlastností lze nastavit jedinou deklarací pro všechny čtyři strany (horní, pravá, dolní a levá). Počet hodnot přiřazených takovéto souhrnné vlastnosti může být od jedné do čtyř. Použijeme-li pouze jednu hodnotu, bude platit pro všechny čtyři strany. Při použití dvou hodnot bude první platit pro horní a dolní stranu a druhá pro levou a pravou stranu. Při použití tří hodnot budou postupně odpovídat horní, pravé a dolní straně. Pro levou stranu bude použita stejná hodnota jako pro pravou. Zápis
BODY { margin: 1em 2em } BODY { margin: 1em 2em 3em }
je ekvivalentní s
BODY { margin-top: 1em; BODY { margin-top: 1em;
margin-bottom: 1em; margin-bottom: 3em;
margin-right: 2em; margin-right: 2em;
margin-left: 2em } margin-left: 2em }
V této skupině ještě nalezneme vlastnosti
width a height, které
slouží k nastavení šířky a výšky elementu. Uplatní se
zejména u nahrazovaných elementů
(obrázky).
Pomocí vlastnosti float můžeme z elementu
udělat plovoucí objekt. To znamená, že pak bude obtékán okolním textem
zleva či zprava. Tato vlastnost odpovídá nastavení atributu
ALIGN u obrázků na hodnotu
LEFT nebo RIGHT. Svou obdobu má
v HTML i vlastnost clear, která určuje,
zda se element zobrazí až po skončení všech plovoucích objektů. Můžeme
si vybrat, zda se bude čekat na skončení všech objektů (hodnota
both) nebo jen na skončení objektů vpravo
(right) či vlevo (left).
Následující krátký styl umístí všechny obrázky jako plovoucí objekty
vlevo. Všechny nadpisy první a druhé úrovně budou vždy začínat až
pod obrázky.
IMG { float: left }
H1, H2 { clear: both }
