📦 AULA 4

Box Model e Espaçamento

Domine o Box Model do CSS: margens, bordas, preenchimento, dimensões e espaçamento. Aprenda a controlar o layout de qualquer elemento na web.

⏱️ 50 min
🎯 Essencial
📦 Box Model
🧩 Layout

🎯 Objetivos de Aprendizagem

📦 Entender o Box Model

Compreender como o CSS calcula o tamanho e o espaçamento dos elementos.

🧩 Controlar Espaçamento

Usar margin, padding e border para criar layouts organizados.

🔍 Prática Visual

Visualizar e depurar o box model no navegador.

📦 1. O que é Box Model?

Todo elemento HTML é uma "caixa" composta por conteúdo, preenchimento (padding), borda (border) e margem (margin). O box model define como essas partes se relacionam e determinam o espaço ocupado na página.

Ilustração do Box Model 
/* Exemplo de box model */
.box {
    width: 300px;
    padding: 20px;
    border: 4px solid #1976d2;
    margin: 24px auto;
    background: #e3f2fd;
}

🧩 2. Margin, Border, Padding, Content

margin: Espaço externo à borda.
border: Linha ao redor do elemento.
padding: Espaço interno entre o conteúdo e a borda.
content: O conteúdo em si (texto, imagem, etc). 

.exemplo {
    margin: 16px;
    border: 2px dashed #42a5f5;
    padding: 12px 24px;
    background: #fff;
}

💡 Dica

  • Use ferramentas de inspeção do navegador para visualizar o box model de qualquer elemento.
  • O padding aumenta o tamanho da caixa, enquanto a margin afasta o elemento dos outros.

🔧 3. Propriedade box-sizing

Por padrão, o CSS soma padding e border à largura/altura do elemento (content-box). Com box-sizing: border-box, o padding e a border ficam "dentro" da largura definida, facilitando o layout responsivo. 

/* Padrão recomendado para todos os projetos */
* {
    box-sizing: border-box;
}

🎯 Boas Práticas

  • Sempre use box-sizing: border-box no reset global.
  • Facilita o cálculo de tamanhos e evita bugs de layout.

📏 4. Espaçamento e Layout

Combine margin, padding e border para criar layouts organizados e responsivos. Use shorthand para simplificar o código. 

/* Shorthand para margin e padding */
.box {
    margin: 24px 12px 24px 12px; /* top, right, bottom, left */
    padding: 16px 32px;          /* top/bottom, right/left */
}

💡 Dica Visual

  • Use cores de fundo temporárias para visualizar o espaçamento durante o desenvolvimento.
  • Ferramentas como CSS-Tricks Box Model ajudam a entender visualmente.

🏋️‍♂️ Exercício: Cartão com Box Model

Crie um cartão de perfil com:

📋 Resumo da Aula