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 amargin
é 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
Top comments (2)
Excelente artigo 🤩
Obrigado @levxyca ! 💜