Agarrando o controle daquele preenchimento e margem indisciplinados do elemento filho

A propriedade box-sizing facilita a definição de um atributo de largura e altura em um div e permite que ele permaneça estático mesmo se você adicionar preenchimento aos elementos filhos do div.

Aqui está um exemplo:

#div_box {
  width: 430px;
  height: 315px;
  box-sizing: border-box;
}

Agora, se qualquer elemento filho da caixa #div tiver preenchimento ou margem definida, isso não afetará a altura e / ou largura da caixa #div

#div_box p {
  padding: 20px;
}

Experimente 🙂 Melhor ainda, escreva um SASS Mixin para acomodar prefixos de fornecedores:

@mixin box-sizing() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Boom, isso foi fácil, não foi? Compatível com todos os navegadores, exceto IE7.