This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Souhrn

CSS vlastnost box-sizing se používá ke změně výchozího CSS box modelu, který určuje šířku a výšku elementů. Tuto vlastnost je možné použít pro emulaci chování prohlížečů, které přesně nedodržují specifikaci CSS box model.

Initial valuecontent-box
Applies toall elements that accept width or height
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntaxe

Formální syntaxe: content-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

box-sizing: inherit

Hodnoty

content-box
Toto je výchozí styl, jak je stanoveno ve standardu CSS. Vlastnosti width a height určují velikost samotného obsahu bez okolních oblastí, jako je vnitřek nebo vnější okolí rámečku.
padding-box
Vlastnosti width a height zahrnují rozměry vnitřní výplně rámečku (padding), ale ne samotný rámeček a jeho okolí.
border-box
Vlastnosti width a height zahrnují hranici rámečku, ale ne jeho okolí (margin). Tento box model používá Internet Explorer, když je v režimu Quirk.

Příklady

/* support Firefox, WebKit, Opera and IE8+ */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Specifikace

Specifikace Status Komentář
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Recommendation  

Kompatibilita prohlížečů

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Funkce Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Základní podpora 1.0-webkit
9.0
1.0 (1.0)-moz
[1]

8.0

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box No support 1.0 (1.0) ? No support ?
Funkce Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Základní podpora (Yes) 1.0 (1.0)-moz [1] Mango 7.5 (Yes) (Yes)
padding-box ? 1.0 (1.0) ? ? ?

Poznámky

[1] Experimentální implementace (s prefixem) box-sizing obsahuje několik chyb (chyba 243412). Ty jsou krůček po krůčku opravovány:

  • Před Geckem 16.0 (Firefox 16) -moz-box-sizing nefungoval na buňky tabulek (chyba 338554);
  • Před Geckem 17.0 (Firefox 17) vlastnosti min-height/max-height nefungují s -moz-box-sizing: border-box (chyba 308801)

box-sizing není respektována, když height vypočítána z window.getComputedStyle, nejméně ve Firefoxu 18 (chyba 520992) a Internet Exploreru 9, ne však v Chrome 24 (jiné prohléžeče a vlastnosati netestovány). Note that IE9's proprietary currentStyle property does return the correct value of height.

V Gecku zatím neexistuje implementace bez předpony.

Viz také

Štítky a přispěvatelé do dokumentace

Přispěvatelé této stránky: Sebastianz, teoli, makovickym
Poslední aktualizace od: Sebastianz,