Aula 10 - Box Model 📦

A Ciência das Caixas no CSS

👋 Olá!

Você já se perguntou por que um botão fica maior quando mudamos o espaçamento?

Tudo no CSS é uma caixa, e hoje vamos aprender a medi-las! 📏

Agenda de Hoje 📅

O Conceito de Caixa
Content (Conteúdo)
Padding (Preenchimento)
Border (Borda)
Margin (Margem)
Box Sizing (O Segredo)

📦 1. Tudo é uma Caixa

Cada tag HTML (h1, p, div, img) é um retângulo invisível.
O CSS permite controlar cada camada desse retângulo.

🍔 As Camadas da Caixa

Content (Conteúdo) 📝

É o texto, imagem ou vídeo dentro da tag.
Definido pelas propriedades width e height.

Padding (Preenchimento) ☁️

Espaço interno entre o conteúdo e a borda.
"Respiro" para o texto não encostar nas paredes.

Border (Borda) 🧱

A linha que envolve o conteúdo e o preenchimento.
Pode ter cor, estilo e espessura.

Margin (Margem) ⬅️➡️

Espaço externo entre a caixa atual e as vizinhas.
Serve para afastar um elemento do outro.

📊 Anatomia Visual

graph TD
    M[Margin - Distância Externa] --> B[Border - Moldura]
    B --> P[Padding - Respiro Interno]
    P --> C[Content - Texto/Imagem]

🧱 2. Propriedades na Prática

Margin e Padding 📏

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

- Você pode definir cada lado: margin-top, padding-left, etc.

Bordas Estilosas ✨

.caixa {
  border: 2px solid black;
}

- 2px: Espessura. - solid: Estilo (contínuo). - black: Cor.

⚠️ 3. O Problema do Tamanho

Por padrão, o navegador SOMA tudo!
Largo: 300px
- Padding: 20px (cada lado)
= Total: 340px! 😱

🛡️ 4. Box Sizing

A propriedade que salva vidas!

* {
  box-sizing: border-box;
}

- Faz com que o Padding e a Borda fiquem dentro da largura definida. - 300px será SEMPRE 300px.

👨‍💻 5. Exemplo Completo

.card {
  width: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box;
}

Resumo da Aula ✅

Content = O presente.
Padding = Plástico bolha.
Border = A caixa de papelão.
Margin = Distância entre caixas.
Border-box é essencial!