MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Resumo

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 de usar essa propriedade para emular o comportamento dos navegadores (browser) 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: padding-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 propiedades de largura (width) e de altura (width) 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.
Candidate Recommendation  

Compatibilidade dos navegadores (browsers)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 1.0 -webkit [1]
10.0
1.0 (1.7 or earlier)-moz[1]
29.0 (29.0)

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box Não suportado 1.0 (1.0) Não suportado Não suportado Não suportado
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Yes) (Yes)
padding-box Não suportado 1.0 (1.0) Não suportado Não suportado Não suportado

Notas

[1] box-sizing  não é respeitado quando a altura (height) é calculada pela função  window.getComputedStyle(), no Internet Explorer, no Firefox antes da versão 23 e no Chrome. Observe que a propriedade currentStyle no navegador Internet Explorer versão 9 retorna o valor correto da altura.

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: geovannikun, ekbaumgarten, morvanabonin
 Última atualização por: geovannikun,