Введение в CSS Box Model: из чего состоит коробка элемента?

Question

Accepted Answer

## Введение в box model

Каждый элемент порождает прямоугольную коробку. Слои от центра наружу:

1. content
2. padding
3. border
4. margin

Margin может схлопываться у соседних block. `width`/`height` по умолчанию относятся к content (`content-box`), пока не сменят `box-sizing`.

```css
.box {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid #ccc;
}
```

## Итог

Понимание слоёв коробки — фундамент для отступов, размеров и отладки overflow.