mozilla
Your Search Results

    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

    Specifikace Status Komentář
    CSS Level 2 (revision 1) Recommendation Prakticky žádná změna
    CSS Level 1 Recommendation  

    Viz také

    Document Tags and Contributors

    Contributors to this page: makovickym, teoli
    Last updated by: teoli,