CSS Box Model: content, padding, border и margin

Question

Accepted Answer

## Слои box model

В классической схеме W3Schools/учебников коробка включает:

- **Content** — текст и медиа;
- **Padding** — внутри рамки вокруг контента;
- **Border** — видимая (или нет) граница;
- **Margin** — снаружи рамки до соседей.

Итоговая занимаемая площадь зависит от этих слоёв и от `box-sizing`.

```css
.panel {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
```

## Итог

Content → padding → border → margin; путаница с width почти всегда про `box-sizing`.