Pomocí kaskádových stylů lze u boxů nastavit šířku, výšku, orámování, vnitřní a vnější okraj, plavání a čekání na skončení plovoucích objektů.

Boxy

Jednotlivým tagům se v původní dokumentaci říká souhrně anglicky boxy – pro lepší přehlednost si tento termín podržíme i zde.

Specifikace CSS popisuje, jakým způsobem při tvorbě stromu dokumentu vznikají boxy pro každý prvek, a definuje pravidla pro to, jak jsou tyto boxy vykreslovány na výstupu.

Jednotlivé boxy podle svých vlastností a umístění v dokumentu mohou tvořit:

• vlastní blok (obdélníková oblast, uvnitř níž je zobrazen obsah boxu),
• nebo vlastní blok nevytvářejí – pak jsou umístěny v jiném, nadřazeném bloku a jejich obsahem jsou řádky.

Z toho důvodu je nejvyšší, kořenový box dokumentu vždy typu blok.

Všechny boxy, ať již jsou to bloky nebo řádky, mají některé společné vlastnosti, popisující obdélník, v němž se jejich obsah nachází. Pokud se jedná o blok, tyto vlastnosti popisují přímo obdélník bloku; pokud se o blok nejedná, tyto vlastnosti popisují jednotlivé obdélníky tvořící každý řádek boxu. Všechny řádky pak mají stejné vlastnosti, definované pro tento box.

Vlastnosti boxů

Každý box je v prvé řadě tvořen svým obsahem (text, obrázek atd.). Kolem něj je několik oblastí, které mohou mít libovolnou (tedy i nulovou) velikost:

• vnitřní oblastí je samotný obsah boxu. Jeho rozměry určují vlastnosti width a height
• kolem obsahu je oblast padding (odstup obsahu od rámečku)
• vně oblasti padding je oblast border (rámeček)
• kolem rámečku je pak oblast margin (okraj, odstup prvku od okolních objektů)

Rozměry všech oblastí mohou být definovány jedinou hodnotou, nebo zvlášť pro každou stranu – vlevo (left), vpravo (right), nahoře (top) a dole (bottom). Ke každé vlastnosti tak existují vždy čtyři pod-vlastnosti, umožňující samostatně definovat jeden ze čtyř rozměrů dané oblasti.

• padding = padding-top, padding-right, padding-bottom a padding-left
• border = border-top, border-right, border-bottom, border-left
• margin = margin-top, margin-right, margin-bottom, margin-left

Celkové rozměry boxu jsou tvořeny součtem rozměrů všech jednotlivých oblastí:

• celková šířka boxu = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
• celková výška boxu = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Margin

Vlastnost margin určuje velikost vnějších okrajů okolo boxu. Jako hodnoty se uvádějí procenta, nebo délky. Všechny vlastnosti vnějších okrajů:

• margin-top – horní vnější okraj
• margin-bottom – dolní vnější okraj
• margin-left – levý vnější okraj
• margin-right – pravý vnější okraj
• margin – kompletní nastavení vnějších okrajů

Při zkráceném zápisu vlastnosti margin první číslo nastavuje horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj.

Padding

Vlastnost padding určuje velikost vnitřních okrajů uvnitř boxu. Jako hodnoty se uvádějí procenta, nebo délky.

Všechny vlastnosti vnitřních okrajů.

• padding-top – horní vnitřní okraj
• padding-bottom – dolní vnitřní okraj
• padding-left – levý vnitřní okraj
• padding-right – pravý vnitřní okraj
• padding – kompletní nastavení vnitřních okrajů

Při zkráceném zápisu vlastnosti padding první číslo nastavuje horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj.

Border

Pomocí vlastností border lze nastavit šířku, barvu a styl rámečku ze všech stran boxu.

Všechny vlastnosti rámečků:

• border-top – nastavení horní části rámečku
• border-bottom – nastavení dolní části rámečku
• border-left – nastavení levé části rámečku
• border-right – nastavení pravé části rámečku
• border – kompletní nastavení rámečku
• border-color – kompletní nastavení barvy rámečku
• border-style – kompletní nastavení stylu rámečku
• border-width – kompletní nastavení šířky rámečku

Hodnoty vlastnosti border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Width

Vlastnost width určuje šířku elementu. Jako hodnota se uvádějí délky a procenta.

Height

Vlastnost height určuje výšku elementu. Jako hodnota se uvádějí délky a procenta.

Float

Může nabývat hodnot: left, right, none a intherit, při použití left, nebo right bude prvek zarovnán vlevo, nebo vpravo a z druhé strany bude obtékán textem. Při použití none prvek neplave. Intherit znamená že hodnota se zdědí po rodičovském prvku.

Hodnoty vlastnosti float:

• left – zarovnání vlevo a obtékání textem z druhé strany
• right – zarovnání vpravo a obtékání textem z druhé strany
• none – neplave
• intherit – hodnota se zdědí po rodičovském prvku

Clear

Vlastnost clear určuje, kde se má prvek zobrazit. Až pod plovoucím prvkem vlevo, vpravo, pod všemi plovoucími prvky nebo bez vlivu na polohu boxu.

Hodnoty: left, right, both, none a intherit.

• left – Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:left.
• right – Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:right.
• both – Prvek se zobrazí až pod všemi plovoucími prvky.
• none – Výchozí hodnota prvek se zobrazí normálně.