Объясните CSS box model и из каких частей она состоит

Question

Accepted Answer

## Модель коробки

**CSS box model** описывает прямоугольную раскладку HTML-элемента. Коробка состоит из:

- **Content** — область содержимого (текст, изображения);
- **Padding** — прозрачный отступ между содержимым и рамкой;
- **Border** — рамка вокруг padding и content;
- **Margin** — прозрачный внешний отступ до соседних элементов.

```css
.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #333;
  margin: 24px;
}
```

## Итог

Визуальный размер блока = content + padding + border (+ margin снаружи). Как именно считаются `width`/`height`, зависит от `box-sizing`.