box-sizing

A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.

Sintaxe

Sintaxe formal: content-box | border-box
box-sizing: content-box
box-sizing: border-box

box-sizing: inherit

Valores

content-box
Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades width (largura) e height (altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;}
padding-box
As propiedades de largura (width) e de altura (height) incluem o tamanho padding size, mas não incluem a propriedade border ou margem.
border-box
As propriedades de largura (width) e de altura (height) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.

Exemplos

/* funciona em Firefox, WebKit, Opera and IE8+ */
/* exemplo de uso no navegador Firefox */

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

Especificações

Especificação Situação Comentário
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification.
Recomendação

Compatibilidade dos navegadores (browsers)

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
box-sizingChrome Full support 10
Notes
Full support 10
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 29
Full support 29
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 8
Notes
Full support 8
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Full support 7Safari Full support 5.1
Full support 5.1
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4
Notes
Full support 4
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 29
Full support 29
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support 6
Full support 6
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
padding-box
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 1 — 50IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 50Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também