CSS Box Model – Entenda como funciona

CSS Box Model

Nenhum produto encontrado nessa seleção.

Todo elemento de uma página é uma caixa (box), sendo assim, o CSS Box Model trata da maneira sobre como calcular o tamanho final das caixas utilizando as propriedades width (largura), height (altura), border (borda), padding (enchimento) e margin (margem).

Por padrão, o CSS Box Model soma todas essas propriedades para formar o tamanho exato de um elemento, tanto para altura como para largura.

Por exemplo, imagine um DIV com classe "caixa" no seu HTML (se quiser pode ir fazendo junto para entender).

<div class="caixa"></div>

Já no CSS você teria algo simples, como:

.caixa {
	width: 200px;
	height: 200px;
	background: #f00;
}

É uma caixa vermelha que tem exatamente 200px de altura e 200px de largura, nada mais, nada menos.

CSS Box Model 1

Até aqui não temos nada de novo, já que o tamanho do nosso elemento é exatamente o que queremos. Porém, agora vamos adicionar a propriedade borda de 1px, e margem de 20px para todos os quatro lados da caixa:

.caixa {
	width: 200px;
	height: 200px;
	background: #f00;
	border: 1px solid #000;
	margin: 20px;
}

Veja como fica quando analisamos o elemento com o Firebug:

CSS Box Model 2

Agora o nosso elemento tem 202px de altura e largura, mas a ocupação de espaço desse elemento, na verdade, é de 242px de altura e de largura.

Vamos ver como fazer a soma?

CSS Box Model – O cálculo 

Quando vamos fazer o cálculo para saber a dimensão exata de um elemento na tela, devemos levar em consideração a parte horizontal, que envolve:

  • width (largura);
  • border-left (borda da esquerda) e border-right (borda da direita);
  • margin-left (margem da esquerda) e margin-right (margem da direita);
  • padding-left (enchimento da esquerda) e padding-right (enchimento da direita).

E a parte vertical, que envolve:

  • height (altura);
  • border-top (borda do topo) e border-bottom (borda inferior);
  • margin-top (margem do topo) e margin-bottom (margem inferior);
  • padding-top (enchimento do topo) e padding-bottom (enchimento inferior).

Para saber a largura exata do elemento, basta somar tudo que envolve a parte horizontal, por exemplo:

.caixa {
	width: 200px;
	height: 200px;
	background: #f00;
	border: 1px solid #000;
	margin: 20px;
}

Para este exemplo temos a seguinte soma:

200 (width) + 1 (border-left) + 1 (border-right) + 20 (margin-left) + 20 (margin-right) = 242

Sabemos que é 242px porque só utilizamos o pixel (px) como unidade em todas as propriedades.

Para saber a altura exata do elemento, basta somar tudo que envolve a parte vertical, por exemplo:

200 (height) + 1 (border-top) + 1 (border-bottom) + 20 (margin-top) + 20 (margin-bottom) = 242

Essa conta é bem simples, porém, faça a conta abaixo e me diga qual a largura exata do elemento:

.caixa {
	width: 200px;
	height: 200px;
	background: #f00;
	border: 1px solid #000;
	margin: 10px 1.24em 2.2em 31px;
	padding: 0.1em 10em 2.5em 31px;
}

Vou ser bonzinho e deixar até os números:

CSS Box Model 3

Brincadeira, não precisa fazer as contas. Mas perceba o quanto isso é chato para o desenvolvedor, ter que analisar cada recurso para calcular o tamanho de um elemento não é uma tarefa fácil, apesar de não é totalmente necessário.

Abaixo vou mostrar uma propriedade do CSS que vai salvar sua vida.

Box-sizing

Ainda vamos criar um artigo específico para box-sizing, porém, vou mostrar apenas uma opção só para que você entenda como essa propriedade altera o modo com que o CSS Box Model gera o tamanho final de um elemento:

Se eu modificar o meu exemplo para:

.caixa {
    width: 200px;
    height: 200px;
    background: #f00;
    border: 10px solid #000;
    box-sizing: border-box;
}

Meu elemento, teoricamente, teria que ter 220px de largura e de altura, isso porque cada lado do elemento tem uma borda de 10px, porém, ao analisar o elemento com o firebug, meu offset continua 200:

CSS Box Model 4

Isso acontece porque a propriedade box-sizing com o valor border-box, fazem com que o elemento não exceda o tamanho configurado em width (largura) e height (altura).

Com exceção da margem (margin), todas as propriedades que foram descritas por afetarem o CSS Box Model, são configuradas para dentro do elemento, como na imagem acima, que mostra a borda voltada para dentro do elemento, e não para fora. Com isso, o elemento vai continuar a ter 200px de largura e de altura sempre, não importa o que você configure.

Observação: Como já era de se esperar, a margem continua afetando o espaço que o elemento ocupa nada tela.

Conclusão

Caso queira brincar um pouco mais com o CSS Box Model, acesse o endereço abaixo:

Este é um exemplo interativo sobre o funcionamento do CSS Box Model, basta arrastar os sliders e ver o que acontece.

/por