|
||
Každý prvek v dokumentu je ohraničen obdélníkovým rámem. Základní rozměry tohoto rámu určují hodnoty vlastností width (šířka rámu) a height (výška rámu).
Součástí rámu může být dále:
výplň (vlastnost padding),
rámeček (vlastnost border),
okraj (vlastnost margin).
Jednotlivé části rámu můžete vidět znázorněné na obrázku 
.
Tyto části jsou barevně odlišeny a popsány příslušnými vlastnostmi (viz. následující text).
Definují prostor, který je k dispozici pro obsah formátovaného prvku. Zpravidla se jedná o textový obsah, ale je možné definovat i prostor pro obrázek (prvek img), či objekt (prvek object).
Jako hodnoty lze použít:
rozměry v libovolných jednotkách,
klíčové slovo auto - výchozí hodnota.
Jsou-li použity rozměry v procentech, jedná se o procenta z rozměru omezujícího bloku.
Omezující blok tvoří prvek, ve kterém se formátovaný prvek nachází. Máme-li např. odstavec p, který je obsažen uvnitř prvku body <body><p></p></body>, pak jeho omezujícím blokem je rozměr prvku body.
V ukázce 
je definována šířka obsahu prvku <body> v pixelech. Šířka odstavce <p> je definována jako 50% z této šířky. Pro názornost je pozadí prvků barevně odlišeno (body - žluté, p - šedé).
Výchozí hodnota auto je pro šířku (vlastnost width) a výšku (vlastnost height) interpretována rozdílně.
Je definována vlastností width.
Je-li obsahem formátovaného prvku text, bude prvek formátován podle následujících zásad:
Není-li nastavena šířka prvku (výchozí hodnota auto), přizpůsobí se prvek velikosti omezujícího bloku.
Je-li text prvku delší, než šířka prvku, vyplňuje celou jeho šířku. Text, který přesahuje šířku prvku, je zalomen.
Je-li šířka nastavena menší, než je nejdelší slovo textu, pak toto slovo přeteče (viz. vlastnost overflow ve studijním článku Vlastnosti zobrazení).
V ukázce 
můžete vidět dva odstavce, které jsou zformátovány podle výše uvedených zásad. Odstavce mají šedé pozadí a od sebe jsou odlišeny pomocí selektorů tříd "prvni" a "druhy". První z nich nemá definovánu šířku (vlastnost width tedy nabývá své výchozí hodnoty auto). Druhý odstavec má šířku definovánu menší, než je nejdelší slovo textu. Že je výchozí hodnotou vlastnosti width opravdu hodnota auto, se můžete přesvědčit, upravíte-li pravidlo p.prvni { } takto p.prvni { width: auto } Výsledek bude v obou případech shodný.
Změníte-li šířku prvku body (změna hodnoty vlastnosti width u selektoru body), změní se automaticky i šířka prvního odstavce. Došlo totiž ke změně velikosti omezujícího bloku tohoto odstavce.
Je definována vlastností height.
Je-li obsahem formátovaného prvku text, bude prvek formátován podle následujících zásad:
Již v ukázce jste mohli vidět, jak se výšky prvků přizpůsobovaly jejich obsahu. Výška odstavce p se přizpůsobila textu, který v něm byl zapsán. U prvku body se výška přizpůsobila nadpisům a odstavcům, které tvořily jeho obsah. Oba tyto prvky neměly definovánu hodnotu vlastnosti height (nabývala tedy své výchozí hodnoty auto). Přidáte-li nějaký obsah do XHTML kódu ukázky, uvidíte, jak se výška změněných prvků automaticky mění.
Jak obsah prvku přeteče, můžete vidět v ukázce 
. Výška prvků p i body je nastavena tak malá, že obsah odstavce p přeteče oba tyto prvky.
Jsou definovány vlastnostmi width a height.
Pro obrázky (prvky img) a objekty (prvky object) se používají stejné vlastnosti, jako pro textové prvky. Obrázky a objekty se však formátují podle odlišných zásad.
Jedná se o tyto zásady:
Po spuštění ukázky 
můžete vidět třikrát obrázek zcu.png, který je zformátován podle třech výše uvedených zásad. Odstavec, ve kterém jsou obrázky obsaženy, má šedé pozadí. Tentýž obrázek je do odstavce vložen třikrát a jednotlivé kopie jsou od sebe jsou odlišeny pomocí selektorů tříd "prvni", "druhy" a "treti". První z nich nemá definovánu šířku ani výšku (jeho vlastnosti width a height mají výchozí hodnoty auto). Obrázek tedy nabývá svých skutečných rozměrů (347x175 pixelů). Druhý obrázek má definovánu šířku width i výšku height. Oproti originálu je na šířku roztažen a na výšku zúžen. Třetí obrázek má nastavenu pouze šířku width. Výška height nabývá výchozí hodnoty auto. To způsobí, že je výška třetího obrázku automaticky přizpůsobena poměru stran originálního obrázku. Pozor! Pravidlo img.treti { width: 25% } znamená, že šířka třetího obrázku bude 25% z šířky OMEZUJÍCÍHO BLOKU. Nikoli 25% z šířky originálního obrázku! Omezujícím blokem je v tomto případě odstavec p.
Kolem obsahu prvku lze definovat rámeček.
Pro nastavení rámečku jsou k dispozici následující vlastnosti:
border-width - šířka rámečku,
border-color - barva rámečku,
border-style - styl rámečku.
Je definován vlastností border-style.
Styl rámečku upravuje "čáru", která tvoří rámeček.
Volíme jej pomocí následujících klíčových slov:
none - žádný rámeček (šířka rámečku je zároveň nastavena na nulu) - výchozí hodnota,
solid - plná čára rámečku,
double - dvojitá čára,
dashed - čárkovaná čára,
dotted - tečkovaná čára,
groove - čára vyrytá do pozadí,
ridge - čára vystupující z pozadí,
inset - orámovaný prvek je vtlačen do pozadí,
outset - orámovaný prvek vystupuje z pozadí.
Vlastnost border-style umožňuje zvolit styl:
Tyto příklady si můžete prohlédnout v ukázce 
. Na nadpisu h1 je demonstrován první způsob definování stylu, druhý na nadpisu h2 a třetí na odstavci p.
Také je možné volit styl jednotlivých stran rámečku pomocí vlastností:
border-top-style - styl horní strany rámečku,
border-right-style - styl pravé strany rámečku,
border-bottom-style - styl dolní strany rámečku,
border-left-style - styl levé strany rámečku.
To můžete vidět na jednotlivých položkách seznamu li v ukázce . Položky mají nastaven styl pouze pro dolní stranu rámečku. Ostatní strany mají styl definován výchozí hodnotu none.
Je definována vlastností border-width.
Šířkou rámečku se rozumí "tloušťka" čáry, která bude vykreslena okolo prvku.
Tuto šířku můžeme definovat pomocí klíčových slov:
thin - tenký rámeček,
medium - středně široký rámeček (výchozí hodnota),
thick - tlustý rámeček.
Přesně lze šířku rámečku definovat pomocí rozměrů v libovolných jednotkách (vyjma procent). Jednotky lze v definicích libovolně kombinovat (např. border-width: 2px 1mm 5pt 0.25cm ).
Viz. nadpis h1 v ukázce 
.
Vlastnost border-width umožňuje volit šířku obdobně jako border-style volit styl. Zadáme-li pouze jeden rozměr, budou všechny strany rámečku stejně široké. Dva rozměry formátují zvlášť horizontální a zvlášť u vertikální strany rámečku. Čtyři pak každou stranu zvlášť (shora ve směru hodinových ručiček).
Další podobností s border-style je i definice pomocí vlastností:
border-top-width - šířka horní strany rámečku,
border-right-width - šířka pravé strany rámečku,
border-bottom-width - šířka dolní strany rámečku,
border-left-width - šířka levé strany rámečku.
Viz. odstavec p v ukázce .
Je definována vlastností border-color.
Hodnotou této vlastnosti je barva zadaná libovolným způsobem (dekadicky, procentuálně, hexadecimálně, či klíčovým slovem - viz. studijní článek Hodnoty). Výchozí hodnota je dána hodnotou vlastnosti color (viz. studijní článek Vlastnosti písma). Definujeme-li tedy pouze barvu písma (pomocí vlastnosti color), barva rámečku se automaticky přizpůsobí.
V ukázce 
má nadpis h1 definován pouze styl rámečku a barvu písma. Vlastnost border-color tak nabyde své výchozí hodnoty.
Jako barvu rámečku je možné použít i hodnotu transparent, která učiní rámeček průhledný. Rámeček si i poté zachová svou šířku, ale bude skrze něj vidět pozadí prvku.
Podobně jako u vlastností border-style a border-width je i u vlastnosti border-color možné nastavit různé styly pro horizontální, vertikální i jednotlivé strany rámečku.
Popřípadě použít některou z vlastností:
border-top-color - barva horní strany rámečku,
border-right-color - barva pravé strany rámečku,
border-bottom-color - barva dolní strany rámečku,
border-left-color - barva levé strany rámečku.
Různé použití těchto vlastností můžete vidět na rámečcích nadpisu h2 a odstavců v ukázce .
Je definována vlastností border.
Umožňuje nastavení všech vlastností rámečku najednou.
Jejími hodnotami jsou hodnoty vlastností:
border-width,
border-color,
border-style.
Zapisují se postupně za sebe a oddělují se mezerou. Na pořadí zadaných hodnot nezáleží. Je možné zadat jen některé z těchto hodnot. U hodnot, které nebudou uvedeny, budou použity jejich výchozí hodnoty.
Vlastnost border umožňuje definovat pouze všechny strany rámečku současně. Není pomocí ní možné definovat zvlášť horizontální, vertikální, ani jednotlivé strany rámečku.
Je však možné použít sdružené vlastnosti pro jednotlivé strany rámečku:
border-top - horní strana rámečku,
border-right - pravá strana rámečku,
border-bottom - dolní strana rámečku,
border-left - levá strana rámečku.
Jak vypadají pravidla z ukázky , zapsaná pomocí sdružených vlastností border, border-top, border-right, border-bottom a border-left, můžete vidět v ukázce 
. Z této ukázky je patrné, že zápis pomocí sdružených vlastností nemusí být vždy úspornější, nežli zápis dílčími vlastnostmi.
Je definována vlastností padding.
Vyplňuje prostor mezi obsahem prvku a rámečkem, který je okolo prvku definován. Pozadí výplně je shodné s pozadím obsahu prvku. Výplň je tedy "prázdný" prostor mezi obsahem prvku (textem, obrázkem, či objektem) a rámečkem.
Velikost výplně je definována rozměrem v libovolných jednotkách. Jsou-li použita procenta, vztahuje se velikost výplně k šířce omezujícího bloku. Pozor! Toto platí jak pro horizontální, tak i vertikální výplně!
Obdobně jako border-style, umožňuje i vlastnost padding definovat velikost výplní na:
všech čtyřech stranách prvku současně,
horizontálních a vertikálních stranách prvku samostatně,
každé straně prvku samostatně.
Také výplň je možné definovat pomocí vlastností:
padding-top - horní výplň,
padding-right - pravá výplň,
padding-bottom - dolní výplň,
padding-left - levá výplň.
V ukázce 
mají prvky definovány výplně různým způsobem. Pro větší názornost je navíc definována barva pozadí a rámeček prvků h1, h2 a p. Nadpis h1 má nastavenu horní a dolní výplň na 10 pixelů, levou a pravou na nulu. Nadpis h1 má nastavenu pouze horní výplň, a to na velikost 2% z šířky omezujícího bloku. Změníte-li velikost okna, ve kterém se vám ukázka spustila, změní se úměrně velikost tohoto okraje. Odstavec p má výplň nastavenu na všech stranách shodnou. Aby tato výplň dobře vynikla i na pravé straně, byl text odstavce zarovnán do bloku.
Je definován vlastností margin.
Určuje odstup rámečku od okolních prvků, či omezujícího bloku. Pozadí okraje je shodné s pozadím omezujícího bloku. Okraje jsou tedy pouze "prázdným" prostorem (podobně jako výplně).
Velikost okrajů je definována rozměrem v libovolných jednotkách. Jsou-li použita procenta, vztahuje se velikost okrajů k šířce omezujícího bloku. Pozor! Toto platí jak pro horizontální, tak i vertikální okraje!
Okraje mohou být navíc definovány pomocí klíčového slova auto.
Obdobně jako border-width, umožňuje i vlastnost margin definovat velikost okrajů na:
všech čtyřech stranách prvku současně,
horizontálních a vertikálních stranách prvku samostatně,
každé straně prvku samostatně.
Také okraje je možné definovat pomocí vlastností:
margin-top - horní okraj,
margin-right - pravý okraj,
margin-bottom - dolní okraj,
margin-left - levý okraj.
V ukázce 
vidíme prvky, které mají pro větší názornost definován rámeček a barvu pozadí. Nadpisy a odstavec mají barvu pozadí světle modrou, prvek body má pozadí šedé a prvek html bílé. Přestože nebyly definovány okraje žádného z prvků, můžeme okolo nich vidět prázdný prostor. Tento prostor má stejnou barvu, jako jich omezující blok. Jedná se o prostor, který tvoří okraje prvků body, h1, h2 a p. Nadpisy a odstavec mají tedy pouze horní a dolní okraje (šedé), prvek body má okraje na všech stranách (bílé). Prvky mají tyto okraje nastavené jako výchozí. Chcete-li definovat okraj vlastní, můžete tak učinit např. pravidlem h1 { margin: 30px }. Toto pravidlo vytvoří na všech stranách nadpisu h1 okraj o velikosti 30 pixelů. Podobně můžete vytvořit pravidla i pro ostatní prvky.
Je-li okraj nastaven na hodnotu auto, stává se jeho velikost závislou na šířce formátovaného prvku.
Tato závislost se řídí následujícími zásadami:
Formátování okrajů hodnotou auto můžete vidět v ukázce 
.
Prvky v ní mají pro větší názornost definován rámeček a barvu pozadí. Nadpisy a odstavec mají barvu pozadí světle modrou, prvek body má pozadí šedé a prvek html bílé.
Dále má prvek body definovanou šířku width: 600px a zároveň okraje margin: auto. Tyto dvě definice způsobí, že bude prvek body horizontálně vycentrován uvnitř prvku html.
Odstavec p má definovanou šířku width: 550px a levý okraj margin-left: auto. Levý okraj odstavce tedy vyplní všechen zbývající prostor prvku body, který je pro odstavec omezujícím blokem. To jest 600px prvku body mínus 550px prvku p, což se rovná 50 pixelům pro levý okraj prvku p. Odstavec je tak odsunut k pravé straně prvku body. Změníte-li šířku odstavce, levý okraj se automaticky přizpůsobí.
Pro horní a dolní okraje dále platí, že se vzájemně sloučí když:
Sloučení okrajů je možné vidět v ukázce .
Nadpisy h1 a h2 mají nastavenu velikost horního a dolního okraje (pravidla h1 { margin: 10mm 0 } a h2 { margin: 5mm 0 }). Protože se okraje bezprostředně následujících prvků slučují, bude mezi nadpisy h1 a h2 okraj pouze 10mm. Sloučení tedy znamená, že se použije vždy větší ze slučovaných okrajů.
Sloučení horního okraje nadpisu h1 s horním okrajem prvku body můžete vidět, pokud k selektoru body připíšete definici border-top: none. Prvek body dosud neměl nastavenu výplň a s touto definicí nebude mít ani horní stranu rámečku. A protože je prvek body omezujícím blokem prvku h1, budou jejich horní okraje sloučeny. Výsledný okraj bude mít velikost 10mm (body měl horní okraj nulový). Sloučený okraj bude mít stejné pozadí, jako by patřil omezujícímu bloku body (bílé).
Horní a dolní okraje nelze nastavit u řádkových prvků (více se o řádkových prvcích dozvíme ve studijním článku Vlastnosti zobrazení).