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!
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 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:
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.
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!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.