Evite disparidades de modelo de caixa com tamanho de caixa: caixa de borda

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