Что такое CSS Box Model?

Question

Accepted Answer

## Смысл

Каждый элемент — прямоугольная коробка из слоёв:

1. **content** — содержимое  
2. **padding** — внутренняя поля  
3. **border** — рамка  
4. **margin** — внешний отступ (схлопывается у соседних margin в block-потоке)

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 8px;
}
```

`box-sizing` решает, что входит в width. DevTools показывает схему коробки при инспекции.

## Итог

Box model — фундамент размеров и отступов; без него невозможно уверенно верстать.