CSS - Definindo o cálculo de dimensões com box-sizing

Olá web developer! Ao estilizar elementos no CSS, muitas vezes precisamos definir dimensões. Porém, o modo como as dimensões dos elementos são calculadas podem causar alguns problemas.

Onde quero chegar com isso? Bom, algumas pessoas desconhecem que temos duas maneiras de calcular o tamanho dos elementos. Você conhece?

Tamanho baseado no conteúdo

Imagine uma div com um texto dentro. Vamos definir sua largura como 100px e altura também sendo 100px. Isso deveria resultar em um quadrado, já que largura e altura estão iguais, certo? Mas e se eu colocar uma margem interna (padding) de 50px à esquerda? Qual será o tamanho?

.box{
	width: 100px;
	height: 100px;
	padding-left: 50px;
}

Veja que o resultado foi um retângulo com uma largura de 150px. A forma padrão de se calcular o tamanho de um elemento é a soma de sua largura ou altura (width ou height), margem interna (padding) e grossura da borda (border).

Isso pode causar problemas em algumas ocasiões. Imagine que agora a gente queira criar um elemento que preencha 100% da largura de seu pai, mas que também tenha uma margem interna para que o texto não fique encostado em suas bordas. Para isso, vou criar um container para essa nossa caixa:

.container{
  width: 100px;
  height: 100px;
  border: 5px solid rgba(0,0,0,0.5);
}

E vou mudar a nossa caixa agora para que a largura seja 100% ao invés de deixar 100px fixos. Assim, nossa caixa poderá preencher dinamicamente dependendo do tamanho do elemento pai.

.box{
	width: 100%;
	height: 100px;
	padding-left: 50px;
}

Teremos o seguinte resultado:

Veja que a nossa caixa ultrapassou o tamanho do seu elemento pai, pois o padding-left de 50px foi somado à largura, resultado em uma largura total de 150px. Isso pode ser a causa de problemas quando vamos definir dimensões de um elemento dentro de outro e o layout acaba quebrando quando pensamos que deveria estar tudo certo.

Tamanho baseado nas bordas

Para evitar o problema mostrado anteriormente, podemos usar a propriedade box-sizing para indicar como queremos que o navegador calcule as dimensões dos elementos. O valor padrão do box-sizing é content-box. Veja o que acontece quando alteramos para border-box:

.box{
	width: 100%;
	height: 100px;
	padding-left: 50px;
	box-sizing: border-box;
}

O box-sizing com o valor border-box faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura.

Com content-box, ao definir width: 100px, o interior (conteúdo) do elemento terá 100px, mas por termos padding-left: 50px, o tamanho total do elemento será 150px.

Com border-box, se definirmos por exemplo, width: 100px, não importa se colocarmos padding-left: 50px, o tamanho final do elemento será os 100px que definimos em width. Mas como definimos 50px de padding-left, agora o interior do elemento terá apenas 50px de espaço para que o elemento possua 100px de largura no total.

Para evitar problemas, muitas pessoas gostam de forçar o comportamento de todos os elementos e pseudo-elementos como border-box usando o seguinte código:

*, *::before, *::after {
  box-sizing: border-box;
}

Dependendo do que você está criando, se está trabalhando com texto, criando layouts, etc, cada comportamento pode ser o mais indicado.