O que é o modelo de caixa CSS?

Question

Accepted Answer

Todo elemento em CSS é uma caixa retangular **box** feita de quatro camadas, de dentro para fora: **content**, **padding**, **border** e **margin**. Entender como elas se combinam é a base de todo layout.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## O truque clássico: largura total

Com o **padrão** `box-sizing: content-box`, a largura renderizada é *maior* que o `width` que você define, porque padding e border são adicionados no topo:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Isso surpreende iniciantes — você define `width: 200px` mas ocupa 250px. A correção que todos usam:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — espaço *dentro* da borda; faz parte do elemento (clicável, recebe cor de fundo).
- **margin** — espaço *fora* da borda; transparente, e margens verticais adjacentes **entram em colapso** (a maior das duas margens tocando vence).

## Por que isso importa

O modelo de caixa governa o tamanho real dos elementos e como eles se espaçam.

Saber que o modelo padrão adiciona padding/border ao `width` (e por que `border-box` é a solução quase universal) previne a confusão de dimensionamento de layout mais comum.