CSS descomplicado: entendendo a propriedade box-sizing

Durante o processo de desenvolvimento de interfaces para aplicações web, ter o controle do tamanho e do posicionamento de cada elemento é fundamental para o resultado sair como o esperado. Por isso, neste artigo vamos abordar uma propriedade CSS que pode melhorar significativamente o desenvolvimento e estilização de suas páginas, a box-sizing.

Antes de explicar as vantagens e os valores que essa propriedade pode receber, temos que falar sobre o conceito de box-model. De acordo com a W3Schools, box-model é essencialmente a caixa que envolve o elemento e inclui margem, borda, padding e o conteúdo propriamente dito do componente.

Content-box

Por padrão, o valor da propriedade box-sizing é content-box. Dessa forma, o tamanho especificado para o elemento será aplicado apenas no conteúdo em si, sem considerar margens, paddings e bordas.

Os outros valores (margens, paddings e bordas), se existentes, serão incluídos ao elemento e suas medidas serão somadas ao tamanho original do elemento e ele parecerá ser maior do que o valor definido.

No caso de um elemento com a largura de 300px, margens de 10px, padding de 5px e bordas de 1px, o resultado visualizado em tela terá largura total de 312px.

elemento {
  border: 1x solid black;
  margin: 10px;
  padding: 5px;
  width: 300px;
}

300px (largura definida) + 10px (5px de padding de cada lado) + 2px (1px de borda de cada lado) = 312px

Obs.: no caso acima, a margem de 10px também está sendo aplicada e está presente no elemento. No entanto, não conseguimos visualiza-la.

Border-box

Outro valor possível para a propriedade box-sizing é border-box. Com ele no tamanho visualizado em tela serão incluídos os valores do elemento, o padding e a borda, ficando de fora apenas a margem.

Ainda com o exemplo acima, o elemento ficaria com largura de 300px e as margens de 10px cada, não visíveis em tela, mas presentes.

Ou seja, as medidas do padding e da borda são incluídos na largura estabelecida (width: 300px) e o tamanho final após a soma com o valor do elemento em si deverá ser os 300px.

Vantagens

Dentre as vantagens de uso do box-sizing estão o melhor controle do layout, evitando a necessidade de realizar cálculos complexos para chegar ao resultado esperado.

Além disso, seu uso permite a definição de medidas usando tamanhos relativos ao componente no qual o elemento está contido, pois garante que seu tamanho total permaneça consistente, independentemente das bordas e do preenchimento adicionados.

O box-sizing é compatível com outras propriedades do CSS, como flexbox e grid, permitindo controlar a estilização de forma ainda mais eficaz.

Conclusão

A escolha de como utilizar o box-sizing depende do objetivo proposto, mas de forma geral sugiro utilizar border-box sempre que o componente receber padding e/ou bordas. Isso permite termos maior controle para a criação dos componentes. Mas reforço que a escolha deve ser feita sempre com a análise de cada caso.