Box Model – O Conceito Mais Importante do CSS

Aprenda tudo sobre Box Model no CSS, o conceito mais importante que influencia todo design de suas páginas web, pois todos os elementos são formados por caixas!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula, o Diego explica o Box Model (modelo de caixa), o conceito mais importante do CSS: todo elemento do HTML é uma caixa formada por 4 partes, conteúdo, padding (espaçamento interno), border (borda) e margin (espaçamento externo). Ele mostra tudo nas ferramentas do navegador e ainda o box-sizing (a diferença entre content-box e border-box, o reset que sempre se usa).

Neste vídeo (22 min):

• 0:00 - Todo elemento no HTML/CSS é uma caixa, e o Box Model a representa (visto nas ferramentas do navegador).
• 5:00 - As 4 partes da caixa: conteúdo (azul), padding (interno), border e margin (externo).
• 8:00 - O atalho de padding/margin: 1, 2, 3 ou 4 valores (começa em cima, sentido horário).
• 11:00 - O padding empurra o conteúdo para dentro; a margin empurra os outros elementos para fora.
• 14:00 - box-sizing: por que definir altura 150px acaba dando 262px (content-box).
• 19:00 - border-box + o reset * { box-sizing: border-box } que sempre se usa.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Box Model – O Conceito Mais Importante do CSS

Na aula de hoje, vou te apresentar e explicar o conceito mais importante do CSS: o Box Model.

Esse conceito é fundamental para quem estuda o desenvolvimento de páginas web, pois todos os elementos no HTML e CSS são formados por caixas. O Box Model, portanto, influencia o design de toda a sua página.

Nessa aula, vou te explicar o que é o Box Model (modelo de caixa), como ele é composto e de que forma ele influencia os elementos da página.

Vamos ver, com um exemplo prático, como visualizar e modificar as propriedades dentro do modelo de caixa. Então, faça o download do material disponível e venha comigo!

VS Code – HTML e CSS

Ao longo desta aula, eu estarei utilizando o VS Code e a extensão Live Server.

A extensão Live Server nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.

Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo dessa e de outras aulas de HTML e CSS aqui da Hashtag, confira essa aula aqui.

Box Model – Criando o Arquivo HTML

O Box Model, modelo de caixa, é um conceito essencial no CSS, representando como os elementos HTML são visualizados na página.

Para compreendermos melhor esse conceito, precisamos de uma página criada no nosso navegador que nos permita interagir e inspecionar os elementos nela.

Então, para começar a aula, vamos abrir o VS Code e criar um documento HTML chamado index.html, com a estrutura base de uma página. Vamos personalizar a tag <title> e adicionar um <h1> dentro do <body>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Model</title>
  </head>
  <body>
    <h1>Minha página de Box Model</h1>
  </body>
</html>

Com o arquivo criado, vamos utilizar a extensão do Live Server para visualizar essa página no navegador. Para isso, clique com o botão direito do mouse sobre o arquivo HTML e selecione a opção Open with Live Server.

Ferramentas do Programador

Para inspecionarmos os elementos da nossa página e interagirmos com eles direto do navegador, podemos utilizar as ferramentas do programador. Para acessá-las, basta pressionar a tecla F12 na janela do navegador.

Essa janela nos permite inspecionar tanto a parte de HTML quanto de CSS de um site. E repare que ao lado direito já temos uma caixinha, o nosso modelo de caixa.

O Box Model (modelo de caixa) é o conceito do CSS que trata todo elemento HTML como uma caixa retangular formada por quatro camadas: conteúdo, padding (espaço interno), border (borda) e margin (espaço externo). Entender como essas camadas somam tamanho é essencial para controlar o layout — e a propriedade box-sizing: border-box facilita muito esse cálculo.

O que é Box Model? – Modelo de Caixa

O Box Model é um conceito essencial no CSS, ele representa como os elementos HTML são renderizados e visualizados em uma página web.

Cada elemento HTML é considerado uma caixa, e o modelo de caixa descreve como o espaço é distribuído dentro e ao redor dessa caixa.

O Box Model é formado por quatro partes principais:

HTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agora

Content (Conteúdo): A área dentro da caixa que contém o conteúdo do elemento em si, como texto, imagens ou outros elementos HTML. Essa é a parte onde o conteúdo é exibido.

Padding (Preenchimento): É a área ao redor do conteúdo, preenchimento interno, dentro da borda da caixa. O padding é usado para criar espaço entre o conteúdo e a borda.

Border (Borda): A linha que delimita o conteúdo e o preenchimento da caixa.

Margin (Margem): É a área ao redor da borda da caixa, o espaçamento externo, que separa a caixa dos demais elementos na página.

Como é formado o Box Model?

Como vimos, o modelo de caixa (Box Model) no CSS é composto por quatro partes principais: conteúdo (content), preenchimento interno (padding), borda (border) e margem (margin).

Vamos explorar essas propriedades visualizando o elemento <h1> da nossa página utilizando as ferramentas do desenvolvedor no navegador.

Perceba que ao selecionar o título, você pode ver na própria página o espaço ocupado pelo conteúdo e pela margem do elemento.

Na janela de CSS, podemos observar as medidas de todos os elementos que formam o Box Model do nosso título.

Em azul, temos o conteúdo do elemento ocupando um espaço de 1584×37 pixels.

Representado em verde, temos o padding, que inicialmente está zerado. Podemos usar a ferramenta do programador para adicionar um valor diretamente no CSS da página.

Adicionaremos um padding de 5px ao nosso título.

Agora, o nosso elemento possui um padding de 5px em todos os lados. Além disso, vamos adicionar uma borda ao nosso elemento. Para a borda (border), precisamos definir o tipo (solid), a espessura (3px) e a cor (red).

Quando definimos apenas um valor para o padding, o CSS aplica o mesmo valor para todos os lados.

No entanto, podemos configurar essas medidas individualmente para cada lado ou de forma abreviada para cada direção (vertical e horizontal).

Um valor: Ao passar apenas um valor, teremos a mesma medida aplicada para todos os lados.

padding: 5px;

Aplicará 5px em cima, embaixo, à direita e à esquerda.

Dois valores: Ao determinar dois valores, o primeiro é aplicado verticalmente (em cima e embaixo) e o segundo horizontalmente (direita e esquerda).

padding: 5px 10px;

Teremos 5px em cima e embaixo e 10px à direita e à esquerda.

Três valores: O primeiro valor é aplicado em cima, o segundo valor é aplicado horizontalmente (direita e esquerda) e o terceiro valor é aplicado embaixo.

padding: 5px 10px 15px;

Aplicará 5px em cima, 10px à direita e à esquerda e 15px embaixo.

Quatro valores: Os valores serão aplicados seguindo a ordem: em cima, à direita, embaixo e à esquerda.

padding: 5px 10px 15px 20px;

Com esses valores teremos 5px em cima, 10px à direita, 15px embaixo e 20px à esquerda.

Podemos fazer o mesmo para a margin, porém já temos nossa margin definida.

Tamanho do Elemento – Box Sizing

Até agora, vimos que o content, o padding, a border e a margin são as propriedades que compõem nosso modelo de caixa (box model). Mas existe um outro conceito muito importante que envolve essas propriedades: a propriedade Box Sizing (box-sizing).

Essa propriedade é responsável pelo cálculo do tamanho total dos elementos. Nesse cálculo, podem estar incluídos os valores do content, do padding e da border. O único valor que nunca fará parte do cálculo é o da margin.

Para visualizar melhor, vamos modificar um pouco os valores do nosso elemento <h1> e atribuir a ele uma altura fixa (height).

Com isso, estamos definindo que nosso elemento tem 150px de altura, 50px de padding e uma borda de 5px.

Aqui começamos a ver a influência da propriedade box-sizing. Por padrão, quando definimos a altura de um elemento, esperamos que todo o conjunto do elemento tenha o tamanho definido. Nesse caso, seria 150px de altura.

No entanto, por padrão, a propriedade box-sizing tem o valor de content-box, em que o padding e a border são adicionados ao tamanho final do elemento.

Ou seja, nosso elemento de 150px de altura terá adicionado à sua altura mais 100px do padding (50px em cima e 50px embaixo) e 10px da borda (também em cima e embaixo), fazendo com que, ao final, esse elemento ocupe 260px na página, 110px a mais do que o esperado.

Para que os valores do padding e da border sejam incluídos ao valor do conteúdo do elemento, precisamos definir o box-sizing como border-box.

Nesses casos, o navegador considerará que, dentro dos 150px de altura do elemento, temos 100px para o padding e 10px para a border, deixando o content do elemento em si com 40px.

Por ajudar a ter um controle maior sobre o layout da página, é muito comum, praticamente um padrão, que você sempre defina no seletor universal do CSS (*) o box-sizing como border-box.

*{
    box-sizing: border-box;
}

Dessa forma, todos os elementos da página terão o seu tamanho incluindo o content, padding e border no valor definido.

Perguntas frequentes sobre o Box Model no CSS

Conclusão – Box Model – O Conceito Mais Importante do CSS

Nessa aula eu te apresentei e expliquei o conceito e a aplicação do Box Model, um dos elementos mais importantes que temos no CSS.

Esse é um conceito fundamental para o desenvolvimento web e dominá-lo é fundamental para a construção de layouts bem estruturados e organizados para suas páginas.

Hashtag Treinamentos

Para acessar publicações de HTML e CSS, clique aqui!