O que faz o box-sizing: border-box?

Question

Accepted Answer

`box-sizing` controla **o que as propriedades `width` e `height` realmente medem**. O padrão (`content-box`) mede apenas o conteúdo; `border-box` faz com que incluam padding e border.

## O problema com o padrão (content-box)

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

Com `content-box`, padding e border são **adicionados no topo** de `width`, então o elemento fica mais largo do que o número que você definiu. Isso quebra layouts: uma caixa `width: 50%` com padding transborda seus 50%.

## A solução: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

Com `border-box`, `width` é a **largura final** renderizada — padding e border são subtraídos de dentro. O número que você define é o tamanho que você obtém, o que é muito mais intuitivo.

## O reset universal

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

Quase toda folha de estilos moderna, framework e reset aplicam isso globalmente. Torna o dimensionamento previsível: `width: 50%` + padding permanece exatamente 50% de largura, duas caixas `width: 50%` ficam lado a lado sem transbordar, etc.

## Por que isso importa

`border-box` remove a fonte mais comum de dores de cabeça em cálculos de layout — ter que somar mentalmente padding e border a cada width.

Definir isso globalmente é considerado uma prática recomendada padrão, porque "a largura que defino é a largura que obtenho" é como você naturalmente espera que o dimensionamento funcione.