DEV Community

Cover image for CSS: Aprendendo box model com analogias
Felipe Murakami
Felipe Murakami

Posted on • Updated on

CSS: Aprendendo box model com analogias

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.

Meme GIF CSS - Peter Griffin de Family Guy tentando arrumar uma persiana

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:


Print da aba 'calculado' do DevTools


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.


Casa feita em pixel art


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:


Casa posicionada no centro do lote


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:


Padding adicionado ao lote como uma área de terra ao redor da casa


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:


Border (Cerca) adicionada ao redor do padding


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:


Margem adicionada ao elemento, criando uma área vazia ao redor da borda


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:


Image description


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

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.

Balão onde iremos colocar os doces
Fig. 8 - Balão de festa (border)
Doces
Fig. 9 - Doces (content)
Balão cortado para exibir os doces dentro
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:

Balão pendurado no teto com espaço vazio ao seu redor
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.

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
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.

Imagem da aba computed mostrando que o conteúdo foi reduzido para 70px de altura e largura
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:


Caixa térmica vermelha com borda branca e sem tampa



Fig. 14 - Caixa térmica (border)

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

Barril de chopp
Fig. 15 - Barril de chopp (content)
Cubos de gelo
Fig. 16 - Cubos de gelo (padding)
Caixa térmica com a bebida e o gelo
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.


Caixa térmica vermelha com gelo ultrapassando a altura máxima da caixa



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

O mesmo acontece com nosso elemento HTML:


Imagem da aba computed mostrando que o conteúdo foi reduzido para 0px de altura e largura, mas a altura total do elemento aumentou para 150px



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!

Canecas de cerveja brindando

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

Top comments (2)

Collapse
 
levxyca profile image
Leticia @levxyca

Excelente artigo 🤩

Collapse
 
fhmurakami profile image
Felipe Murakami

Obrigado @levxyca ! 💜