Box Model

 O Box Model é uma das bases mais importantes do CSS. Se HTML monta a estrutura, o Box Model explica como cada elemento ocupa espaço na página. Quase tudo que “quebra layout” passa por ele.

Todo elemento no CSS funciona como uma caixa composta por 4 partes:

• Content → conteúdo (texto, imagem etc.)
• Padding → espaço interno ao redor do conteúdo
• Border → borda da caixa
• Margin → espaço externo entre elementos

Entender isso ajuda muito a organizar layouts e espaçamentos no site.

O que é Box Model?

No CSS, todo elemento é tratado como uma caixa retangular. Essa caixa tem 4 camadas:

Margin

 └─ Border

     └─ Padding

         └─ Content

Do centro para fora:

Content → conteúdo real

Padding → espaço interno

Border → borda

Margin → espaço externo

Visual simples

+---------------------------+ ← margin
| +-------------------+ | ← border
| | +-----------+ | | ← padding
| | | Conteúdo | | |
| | +-----------+ | |
| +-------------------+ |
+---------------------------+

Content (conteúdo)

É a área onde fica:

• texto
• imagem
• botão
• vídeo
• etc.

Exemplo:

.card{

  width: 300px;

  padding: 20px;

  border: 1px solid #ccc;

  margin: 30px auto;

  box-sizing: border-box;

}