Introdução

Se você está estudando CSS, talvez já tenha se deparado com o termo box model. Caso ainda não tenha, não se preocupe, iremos abordar esse assunto nesse artigo.

Basicamente todo elemento em uma página web é um retângulo chamado de box (caixa), e daí vem o nome box model ou modelo de caixa. Entendermos como funciona esse modelo é a base para conseguirmos criar layouts mais complexos com CSS, ou alinhar itens corretamente.

Ao inspecionar um elemento (clicando com o botão direito ou abrindo o DevTools com os atalhos Ctrl+Shift+C ou F12, dependendo do seu navegador), na aba Computed (Calculado), você provavelmente irá ver a imagem a seguir:

No próximo tópico iremos ver detalhadamente o que significa cada parte dessa imagem.

Estrutura básica do box model

Para ilustrar a estrutura básica do box model irei utilizar como exemplo a construção de uma casa em um terreno. Essa ideia foi inspirada neste artigo [1] (em inglês).

As partes que compõem a estrutura do box model são:

Conteúdo (Content)

O conteúdo se refere à parte mais central da Fig.1 em azul, e está relacionado ao conteúdo dentro de uma tag HTML, como por exemplo o texto em um parágrafo (<p>).

O conteúdo é composto basicamente por duas propriedades, largura (width) e altura (height).

No nosso exemplo, o conteúdo será a casinha abaixo (Fig.2) (se você inspecionar a imagem da casa, verá que as medidas são as mesmas da Fig.1). As dimensões da casa são 81px de largura e 93 px de altura.

O conteúdo precisa estar dentro de uma estrutura HTML, portanto colocaremos nossa casinha dentro de um lote para representar esta estrutura:

Preenchimento (Padding)

A parte em verde da Fig.1 é a propriedade chamada de padding (preenchimento), que cria um espaço ao redor do conteúdo.

O padding é demonstrado pela parte de terra, onde será o jardim, por exemplo:

Borda (Border)

A seguir temos a propriedade border, ou borda, que é responsável por delimitar nosso conteúdo e está representada pela cor amarela na Fig.1. A borda é a última propriedade do nosso elemento que pode ser vista.

A borda pode ser representada como o muro ou, no nosso caso, a cerca da casa:

Margem (Margin)

Por fim, temos a propriedade margin, em laranja (Fig.1), que inclui uma área vazia ao redor do nosso elemento. Como pode ser visto na imagem:

Neste caso, reduzimos o padding para que a margem pudesse ser representada na imagem.

A propriedade box-sizing

Agora que conhecemos a estrutura do box model, podemos abordar a propriedade box-sizing. Essa propriedade nos permite dizer ao navegador como ele deve calcular a altura e a largura do elemento. Temos apenas 2 valores possíveis:

content-box

Este é o valor padrão, em que a altura e a largura do elemento incluem apenas o conteúdo. Portanto, se tivermos um conteúdo com height(altura) e width(largura) de 100px, mais 10px de padding, mais 5px de border e 5 de margin, veremos que o tamanho do nosso elemento mudou de 100px para 130px:

Veja o código aqui:

Isso ocorre pois as propriedades height e width, são aplicadas somente ao conteúdo (a parte azul da Fig.1, lembra?). Porém adicionamos ainda o padding, a border e a margin:

100px (height/width) + 2 * 10px (padding) + 2 * 5px (border) + 2 * 5px (margin) = 140px

Atenção! ⚠️

Ué?! 🤔

A imagem mostra o elemento com 130px e não 140px!
Exato! Lembre-se que a margin é uma propriedade externa (ou um espaço vazio em volta) do elemento e por isso não deve ser somada à altura e à largura do mesmo.

Podemos pensar que com a propriedade box-sizing com o valor content-box, nosso elemento vai crescendo conforme adicionamos mais "camadas".
Para explicar, utilizarei mais uma analogia: Imagine um balão, daqueles de festa de criança, com doces dentro.

Os doces serão o nosso conteúdo, com uma altura e largura fixos. Para que seja possível estourar o balão, vamos adicionar um padding (ar) dentro do balão. O balão em si, é a border e a margin é todo o espaço em volta do balão:

Viu como nosso elemento foi crescendo conforme adicionamos mais propriedades? Ou se adicionarmos mais ar (padding) ao balão?

Outro exemplo de content-box utilizando analogia: um saco de pipoca no microondas, onde temos inicialmente o content (milho), a border (saco de papel) e margin (espaço interno do microondas). Porém ao aquecer, lentamente um padding(ar/vapor dentro do saco) vai sendo adicionado.

border-box

O outro valor possível para a propriedade box-sizing é o border-box. Ele é muito útil quando você quer ter certeza do espaço que seu elemento irá ocupar na página, pois ao invés de atribuir a altura e a largura apenas ao conteúdo, ele utiliza o elemento todo (content + padding + border). Isso ajuda na criação de layouts responsivos, pois garantimos os elementos terão o tamanho exato que for definido mesmo utilizando medidas relativas (%, em, rem etc.).

Utilizando o mesmo exemplo da Fig.7, porém adicionando a propriedade box-sizing: border-box; teremos um elemento final com os 100px de altura e largura como definimos anteriormente.

A diferença é que agora nosso conteúdo reduziu para 70px de altura e largura para não ultrapassar os 100px no total.

Vejo o código aqui:

Neste caso, devemos pensar em algo em que as medidas finais não possam ultrapassar um determinado tamanho. Para isso utilizaremos uma caixa térmica como o tamanho máximo, sendo assim, a caixa representará a borda do nosso elemento:

O conteúdo será a bebida que queremos gelar, e o gelo é o padding:

Perceba que quanto mais gelo colocarmos, menor será a bebida que conseguiremos gelar. Como não podemos ter um conteúdo com medidas negativas, o menor tamanho possível será de 0px. Porém, supondo que nossa caixa tenha 100px de altura por 120px de largura , e definirmos um padding de 60px, ao todo teremos 120px de gelo tanto na horizontal quanto na vertical, ou seja, o gelo irá transbordar a caixa térmica.

O mesmo acontece com nosso elemento HTML:

Vejo o código aqui:

Conclusão

Agora que você já conhece a estrutura básica do Box Model, e a propriedade box-sizing, ficará mais fácil entender como os elementos se comportam na sua página web e saber quando usar cada um dos valores (content-box e border-box). Se você inspecionar os elementos dos sites que utiliza no dia-a-dia, verá que a maioria utiliza border-box para seus elementos, pois essa propriedade tem facilitado muito o design responsivo. :)

Parabéns por ter chegado até aqui!

Ficou com alguma dúvida? Tem alguma sugestão? Fique a vontade para deixar seu comentário, ou se preferir, mande uma mensagem privada no Linkedin.

Observação ❗🚫

Todas as imagens deste artigo foram feitas por mim, favor não utilizá-las sem o devido consentimento/crédito.
Os assets prontos que utilizei estão nas referências, e o uso para projetos não-comerciais é permitido.

Referências

[1] The CSS Box Model Explained by Living in a Boring Suburban Neighborhood
[2] MDN Web Docs - The box model
[3] MDN Web Docs - Introduction to the CSS basic box model
[4] MDN Web Docs - box-sizing
[5] W3Schools - CSS Box Model
[6] W3Schools - CSS Box Sizing
[7] The Odin Project - Foundations Course - The Box Model
[8] Learn CSS BOX MODEL - With Real World Examples
[9] Learn CSS Box Model in 8 minutes
[10] box-sizing: border-box (EASY!)
[11] Assets utilizados nas imagens para os exemplos de Box Model
[12] Assets - Caneca de cerveja