Módulo 3: O Box Model (Parte I)
2. Resumo da Aula Anterior
No Módulo 2, aprendemos a dar voz ao site através da tipografia (fontes, tamanhos e alinhamentos). Agora vamos aprender como o browser desenha cada elemento como se fosse uma caixa.
3. O Que Vais Aprender Hoje
- ✅ O conceito fundamental de **Box Model**.
- ✅ A diferença entre **Content**, **Padding**, **Border** e **Margin**.
- ✅ Como o tamanho total de um elemento é calculado.
- ✅ Propriedades de largura (width) e altura (height).
4. Teoria: Tudo é uma Caixa
Conceito: Para o CSS, todos os elementos HTML (h1, p, div, img) são retângulos. O Box Model é o conjunto de regras que define o tamanho e o espaço ocupado por cada uma dessas caixas.
📦 Analogia: A Encomenda Frágil
Imagina que estás a enviar um quadro por correio:
- O Quadro (Content): É o objeto real (texto ou imagem).
- O Plástico de Bolhas (Padding): É a proteção interna. Dá espaço entre o quadro e a caixa.
- A Caixa de Cartão (Border): É o limite visível do objeto.
- O Espaço no Camião (Margin): É a distância de segurança entre a tua caixa e as outras caixas vizinhas.
5. Exemplos Práticos
Exemplo 1: Anatomia de uma Caixa
Como aplicar as 4 camadas.
.caixa {
width: 300px;
height: 100px;
padding: 20px; /* Espaço interno */
border: 5px solid black; /* A "casca" */
margin: 30px; /* Espaço externo */
}Neste exemplo, o elemento terá 300px de largura de conteúdo, mas ocupará mais espaço no ecrã devido ao padding e à borda.
Exemplo 2: Atalhos (Shorthands)
Escrever menos código para os 4 lados.
/* Ordem: Topo | Direita | Baixo | Esquerda (Sentido dos ponteiros do relógio) */
div {
margin: 10px 20px 10px 20px;
/* OU simplificado: Topo/Baixo | Direita/Esquerda */
padding: 15px 30px;
}Decorar a ordem "Relógio" (Cima, Direita, Baixo, Esquerda) vai poupar-te imenso tempo!
6. Agora é a Tua Vez!
Vamos criar um botão "Premium":
- Cria um link
<a>com o texto "Clica Aqui". - No CSS, dá-lhe uma cor de fundo (background-color) chamativa.
- Adiciona
padding: 10px 25pxpara ele parecer um botão real. - Adiciona uma borda grossa (ex: 3px solid white).
- Adiciona
margin-top: 50pxpara o afastar do topo da página.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Cada elemento é uma caixa com 4 camadas.
- 📌 Padding cria espaço dentro da borda.
- 📌 Margin afasta os elementos uns dos outros.
- 📌 Podes definir valores individuais (ex:
margin-left) ou usar atalhos.
9. Desafios Práticos
Desafio 1: O Botão Gordinho
Se quiseres um botão que seja mais alto do que largo usando apenas Padding, que valores usarias?
Desafio 2: Borda Invisível?
Quais são as 3 coisas que uma borda precisa obrigatoriamente para aparecer?
Desafio 3: O Mistério da Margem
Se usares margin: auto; num elemento com largura fixa, o que acontece?