Struktura elementu

Souhrn

Každý element je v dokumentu reprezentován jako obdélníková plocha. O velikost této plochy a její vlastnosti (jako je barva, pozadí, okraje, apod.) se stará vykreslovací modul.

V CSS má každý takový element standardní obdélníkovou strukturu (box model). Tato struktura je dána čtyřmi hranicemi: okraj okolí (margin edge), okraj rámečku (border edge), okraj „vycpávky“ (padding edge), a hranice samotného obsahu (content edge).

Oblast obsahu je prostor, který zabírá skutečný užitečný obsah uvnitř elementu (např. text). Je ohraničena hranicí content edge, jejíž rozměry jsou dány šířkou (content width), a výškou (content height).

Pokud není CSS vlastnost box-sizing nastavena na hodnotu jinou než výchozí, velikost obsahu určují CSS vlastnosti width, min-width, max-width, height, min-height a max-height.

Oblast „vycpávky“ tvoří prázdný prostor mezi obsahem a případným rámečkem. Často je vyplněna pozadím, které může být tvořeno barevnou výplní nebo obrázkem (v tom případě obrázek překrývá barevnou výplň). Její vnější hranice jsou opět dány šířkou (padding-box width) a výškou (padding-box height).

Prostor této výplně llze určit CSS vlastnostmi padding-top, padding-right, padding-bottom, padding-left a komplexní vlastností padding.

Oblast rámečku rozšiřuje předchozí dvě oblasti o oblast zabranou samotným rámečkem. Je to oblast ohraničená hranicí rámečku (border edge), a její rozměry jsou opět dány šířkou (border-box width) a výškou (border-box height). Tato oblast je dána velikostí rámečku, kterou definuje vlastnost border-width nebo stručnější border.

Oblast okolí tvoří kolem oblasti rámečku prázdný prostor, který odděluje element od sousedních. Je ohraničena oblastí okolí (margin edge), opět určenou šířkou (margin-box width) a výškou (margin-box height).

Velikost oblasti okolí je určena vlastnostmi margin-top, margin-right, margin-bottom, margin-left a stručnější margin.

Dojde-li k splynutí okolí, hranice okolí není přesně definována, protože okolí splyne v to větší.

Na konec vemte na vědomí, že místo zabrané řádkovými elementy (výška řádku) určuje vlastnost line-height, nezávysle na rámečku a hranici okolí.

Specifikace

Viz také

• CSS Reference
• CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.
• Související CSS vlastnosti: box-sizing, height, max-height, min-height, width, max-height, min-height, padding, padding-top, padding-right, padding-bottom, padding-left, border, border-top, border-right, border-bottom, border-left, border-width, border-top-width, border-right-width, border-bottom-width, border-left-width, margin, margin-top, margin-right, margin-bottom, margin-left