Pular para conteúdo

Aula 10 - Box Model 📦

Objetivo

Objetivo: Compreender que cada elemento no HTML é uma "caixa" e aprender a controlar o seu tamanho, espaçamento interno, bordas e margens externas utilizando o conceito de Box Model.

1. Tudo é uma Caixa! 📦

No CSS, todo elemento (um título, uma imagem, um parágrafo) é tratado como uma caixa retangular. O Box Model define como essas caixas são calculadas.

2. As Camadas da Caixa 🍰

Imagine uma caixa de presente protegida para envio:

  1. Content (Conteúdo): É o presente em si (texto ou imagem).
  2. Padding (Preenchimento): É o plástico bolha dentro da caixa. O espaço entre o conteúdo e a borda.
  3. Border (Borda): É o papelão da caixa. A linha que envolve o preenchimento e o conteúdo.
  4. Margin (Margem): É o espaço vazio entre a sua caixa e outras caixas ao redor.

3. Visualizando o Modelo 📊

graph TD
    M[Margin - Espaço Externo] --> B[Border - Linha da Caixa]
    B --> P[Padding - Espaço Interno]
    P --> C[Content - Texto/Imagem]

4. Propriedades CSS do Box Model 🛠️

.caixa {
    width: 300px;         /* Largura do conteúdo */
    height: 150px;       /* Altura do conteúdo */
    padding: 20px;       /* Espaço interno */
    border: 2px solid;   /* Borda */
    margin: 30px;        /* Espaço externo */
}

🧩 O Grande Problema do Tamanho

Por padrão, o navegador soma tudo! Se você tem uma caixa de 300px de largura e 20px de padding, o tamanho total na tela será 340px.

✅ A Solução: box-sizing

Para que a caixa mantenha sempre o tamanho que você definiu, usamos esta regra de ouro: 

* {
    box-sizing: border-box;
}

5. Prática: Brincando com Espaços 🚀

Vamos criar uma caixa visual no terminal:

$ touch index.html estilo.css
$ # No CSS, crie:
$ .bloco {
$   background-color: lightgreen;
$   padding: 20px;
$   border: 5px solid darkgreen;
$   margin-bottom: 50px;
$ }

6. Mini-Projeto: Card de Produto 🏷️

  1. Crie um <div> com a classe .card.
  2. Dentro dele, coloque um <h2> (Nome do Produto) e um <p> (Preço).
  3. No CSS, aplique:
    • Um fundo cinza claro.
    • Um padding de 20px para que o texto não encoste na borda.
    • Uma borda sólida de 1px.
    • Uma margin de auto e uma width de 250px para centralizar o card na tela.

7. Exercícios Progressivos 📝

Básicos

  1. Quais as 4 partes que compõem o Box Model?
  2. Qual a diferença entre padding e margin?

Intermediários

  1. Se um elemento tem width: 100px e padding: 10px, qual será a largura total dele sem usar o border-box?
  2. Como fariam para colocar uma margem apenas na parte de baixo de um elemento?

Desafio 🧠

  1. Pesquise e explique a diferença entre as unidades px (pixels) e % (porcentagem) ao definir a width de um elemento.

Próxima Aula: Vamos aprender como as caixas se posicionam com Display e Posicionamento! 📍