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 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

Compatibilidade dos navegadores (browsers)

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

• CSS box model [Eng]