We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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: 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.
Recomendação proposta  

Compatibilidade dos navegadores (browsers)

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!

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: esaramago, geovannikun, ekbaumgarten, morvanabonin
Última atualização por: esaramago,