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 | (en-US) 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 This is an experimental API that should not be used in production code. This is an obsolete API and is no longer guaranteed to work.
As propriedades 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)

BCD tables only load in the browser

Veja também