CSS: Aprendendo box model com analogias

#CSS

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:

Fig.1 - Propriedades do elemento (aba Computed)

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.

Fig. 2 - Conteúdo (casa) e suas dimensões

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

Fig. 3 - Casa posicionada no centro do lote

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:

Fig. 4 - Padding adicionado como uma área de terra ao redor da casa

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:

Fig. 5 - Border (Cerca) adicionada ao redor do padding

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:

Fig. 6 - Margem adicionada ao elemento, criando uma área vazia ao redor da borda

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:

Fig. 7 - Div com 100 px de altura e largura, 10px de padding, 5px de border e 5px de margin utilizando o valor padrão content-box

Isso ocorre pois as propriedades height e width, são aplicadas somente ao conteúdo (a parte azul da Fig.7). 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.

Veja o código aqui

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.

Fig. 8 - Balão de festa (border) | Fig. 9 - Doces (content) | Fig. 10 - Balão com os 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:

Fig. 11 - Doces (content), ar (padding), balão (border), espaço em volta do balão (margin)

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.

Fig. 12 - Div com 100 px de altura e largura, 10px de padding, 5px de border e 5px de margin, porém desta vez utilizando o valor border-box

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

Fig. 13 - Aba computed ao inspecionar o elemento

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:

Fig. 14 - Caixa térmica (border)

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

Fig. 15 - Barril de chopp (content) | Fig. 16 - Cubos de gelo (padding)

Fig. 17 - Caixa térmica com a bebida e o gelo

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.

Fig. 18 - Gelo transbordando a o limite máximo (altura) da caixa térmica

O mesmo acontece com nosso elemento HTML:

Fig. 19 - Inspecionando o elemento é possível ver que, ao adicionar um padding maior do que o tamanho total do elemento, o conteúdo foi reduzido para 0x0 px e a altura aumentou para 150px, mesmo com o box-sizing: border-box

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!