Propriedade box-sizing
A propriedade box-sizing é utilizada para controlar o modelo de caixa de um elemento, ou seja, como as dimensões totais de uma caixa (altura e largura) são calculadas, levando em consideração ou não as bordas e o preenchimento.
Valor da propriedade box-sizing
Valor content-box
Este é o comportamento padrão do Box Model. A largura e a altura de um elemento são calculadas apenas a partir do conteúdo real, excluindo bordas e preenchimento.
Em outras palavras, a largura total de uma caixa é a soma do conteúdo, das bordas e do preenchimento.
.exemplo-content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
}Valor border-box
Neste modelo, a largura e a altura da caixa incluem o conteúdo, o preenchimento e as bordas. Ou seja, a largura total é definida pela soma do conteúdo, do preenchimento e das bordas.
Nota
Esse modelo é amplamente adotado por desenvolvedores, pois torna mais simples especificar tamanhos exatos, sem a necessidade de ajustar constantemente as dimensões ao adicionar bordas ou preenchimentos.
.exemplo-border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
}