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:
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 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:
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.
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.
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:
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 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!
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 ! 💜