Uma propriedade CSS – mas freqüentemente mal interpretada – bem suportada, box-sizing descreve como a largura do conteúdo, o preenchimento e a borda contribuem para a largura geral de um elemento no nível do bloco.
O valor “border-box” evita o modelo tradicional de caixa para algo um pouco mais simples para a matemática. Em vez de adicionar preenchimento e borda a uma largura ou altura especificada, “border-box” os coloca dentro. Por exemplo, o seguinte elemento terá 200 px de largura, independentemente do valor de preenchimento:
/**
* Normally I would be 222px wide,
* but with box-sizing: border-box
* I'll never be wider than 200px!
*/
.slimmer-box {
box-sizing: border-box;
border: 1px solid #777;
padding: 10px;
width: 200px;
}
Você pode atribuir o modelo “border-box” a cada elemento por padrão com um simples:
* { box-sizing: border-box; }
E a simples inclusão de uma propriedade de tamanho de caixa padroniza o modelo de caixa em todos os navegadores, independentemente do modo de renderização!
“box-sizing” tem suporte no IE desde a versão 8. Outros navegadores ainda exigem um prefixo de fornecedor:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Ou você pode apenas usar http://modernizr.com/docs/#polyfills