Aula 8 — Espaçamento e o Box Model

Todo elemento HTML é tratado pelo navegador como uma caixa. Entender essa caixa — o chamado Box Model — é essencial para dominar layout no CSS.

Nesta aula, vamos ver como funcionam margens, preenchimento, bordas e como o navegador calcula o tamanho final dos elementos.

O que é o Box Model?

O Box Model descreve a estrutura de um elemento no CSS. Ele é composto por quatro partes:

• Content — o conteúdo (texto, imagem, etc.)
• Padding — espaço interno
• Border — borda ao redor
• Margin — espaço externo

Conteúdo (content)

O conteúdo é a área onde o texto ou a imagem aparecem. Seu tamanho pode ser controlado com width e height.

 .caixa { width: 200px; height: 100px; } 

Essas propriedades afetam apenas a área de conteúdo.

Espaço interno — padding

O padding cria espaço entre o conteúdo e a borda.

 .caixa { padding: 20px; } 

Isso aumenta visualmente o tamanho do elemento.

Bordas — border

A borda envolve o padding e o conteúdo.

 .caixa { border: 2px solid #428bca; } 

Ela também faz parte do tamanho final do elemento.

Espaço externo — margin

A margin cria espaço fora do elemento, separando-o de outros elementos.

 .caixa { margin: 20px; } 

O problema do tamanho total

Por padrão, o navegador soma:

• width
• padding
• border

Isso pode causar layouts maiores do que o esperado.

Resolvendo com box-sizing

A propriedade box-sizing controla como o tamanho é calculado.

 .caixa { box-sizing: border-box; } 

Com border-box, padding e borda entram no tamanho definido.

Atalho de valores

Padding e margin aceitam atalhos:

 .caixa { margin: 10px 20px; padding: 15px; } 

Ordem dos valores:

• 1 valor → todos os lados
• 2 valores → vertical / horizontal
• 4 valores → topo / direita / baixo / esquerda

Entendendo a ordem dos valores em margin e padding

As propriedades margin e padding permitem usar atalhos para definir os quatro lados de um elemento sem precisar escrever tudo separadamente.

A quantidade de valores informados determina como eles serão aplicados.

Usando 1 valor

Quando apenas um valor é informado, ele é aplicado a todos os lados.

 .caixa { padding: 20px; } 

Resultado:

• 20px no topo
• 20px à direita
• 20px embaixo
• 20px à esquerda

Usando 2 valores (vertical / horizontal)

Com dois valores, o primeiro define topo e base, e o segundo define direita e esquerda.

 .caixa { margin: 10px 20px; } 

Resultado:

• 10px no topo e embaixo
• 20px à direita e à esquerda

Usando 4 valores (sentido horário)

Com quatro valores, cada lado recebe um valor específico, seguindo o sentido horário:

topo → direita → baixo → esquerda

 .caixa { padding: 5px 10px 15px 20px; } 

Resultado:

• 5px no topo
• 10px à direita
• 15px embaixo
• 20px à esquerda

Por que usar esses atalhos?

Os atalhos tornam o código:

• Mais curto
• Mais legível
• Mais fácil de manter

Na próxima aula, vamos trabalhar com bordas — cores, imagens de fundo e gradientes 🌄🎨