A propriedade CSS box-sizing

Introdução

De acordo com o Box Model padrão das CSS (também chamado de Box Model W3C), as propriedades width e height definem as dimensões da área de conteúdo do boxes criado pelos elementos HTML. As dimensões finais do box (largura x altura) são o resultado da soma dos valores das propriedades width, padding e border.

Considere um elemento DIV ao qual aplicamos a seguinte regra de estilo.

div {
  width: 50%; /* largura do box */
  padding: 0 5%; /* padding à esquerda e à direita */
  border: solid red;
  border-width: 0 1%; /* borda à esquerda e à direita */

Segundo o Box Model padrão das CSS, o elemento terá (50% + 2x5% + 2x1%) 62% de largura.

Esse é o comportamento padrão do Box Model CSS, ou seja, as três propriedades se somam para determinar o tamanho final do elemento.

O Box Model Corrigido

Não perca mais tempo fazendo cálculos para determinar o tamanho final dos boxes dos seus elementos quando declarar as propriedades padding e border.

Use box-sizing! Aeeeee!! 🙋

As CSS3 criaram a propriedade box-sizing que quando declarada com uso do valor border-box altera a forma como o Box Model é calculado, incorporando os valores de padding e border à largura do box criado pelo elemento HTML.

No exemplo mostrado anteriormente, se declararmos para o elemento DIV box-sizing: border-box; garantimos que o elemento terá uma largura total (e não somente do conteúdo) igual a 50%.

Sem dúvida essa propriedade CSS torna muito mais intuitiva a visualização das dimensões dos boxes do layout, facilita os cálculos, e possibilita um claro entendimento das dimensões dos boxes. Assim você não precisa fazer cálculos para chegar às dimensões da largura e altura total do box, pois elas são exatamente aquelas que você declarou na sua regra CSS.

Exemplo prático

Considere que você deseja posicionar dois elementos DIV, um ao lado do outro com uso de float, cada um deles com um espaçamento interno (padding) de 5%, e que a soma das larguras dos dois ocupe toda a largura do container no qual foram inseridos. No exemplo a seguir a largura do container é igual à largura da área de conteúdos d página.

Observe a marcação HTML e as CSS para obter o efeito proposto.

<div class="container">
  <div class="box">BOX 1</div>
  <div class="box">BOX 2</div>
</div>

.container {
  height: 300px;
  background: #f2f2f2;
}
.box {
  float: left;
  width: 50%;
  padding: 5%;
  background: red;
  color: #fff;
}
.box:last-child {
  background: green;
}

Observe a seguir o resultado da renderização da marcação HTML mostrada estilizada segundo as regras CSS acima.

Note que o layout quebra, isto é, os dois boxes não se posicionam um ao lado do outro. Isto porque a largura total de cada DIV é de 60% (50% + 2x5%) de acordo com o Box Model padrão. Usando a declaração box-sizing: border-box alteramos o Box Model, fazendo com que a largura de cada box seja 50% e não haverá "quebra do layout".

Clique os botões para alterar o Box Model do container dos dois DIV e observe a renderização.

Box Model W3C Box Model Corrigido

Resumindo

Use a declaração box-sizing: border-box em todos os seus projetos. Ele tornará seu trabalho mais produtivo.

As regras CSS a acrescentar na folha de estilos destinada a todas as páginas, com a finalidade de usar o Box Model Corrigido no site são conforme mostradas a seguir.

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

Mas, esteja ciente de que ao definir o Box Model Corrigido em um projeto existente é quase certo que o layout quebrará a menos que você se disponha a encarar o trabalhão de recalcular as dimensões dos boxes do site

Suporte nos navegadores: O Internet Explorer oferece suporte até a versão IE8. 😩.

Se você pretende servir os IE6 e IE7 use um polyfill.

Consulte link: https://caniuse.com/#search=box-sizing e confira o suporte a esta funcionalidade nos navegadores.

Nota final

A versão original deste tutorial foi editada pelo Maujor® com a devida permissão do autor.

Compartilhe essa matéria com seus amigos