Что делает свойство `box-sizing`?

Question

Accepted Answer

## Что важно понять

Оно определяет, входят ли `padding` и `border` в указанную `width`/`height`.

- **`content-box`** (дефолт) — `width` только контент; padding/border добавляются снаружи.
- **`border-box`** — `width` включает content + padding + border (удобнее для сеток).

```css
*, *::before, *::after { box-sizing: border-box; }
.card {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ccc; /* не раздувает 100% */
}
```

## Итог

Почти все проекты ставят глобальный `border-box` — предсказуемые размеры колонок.