Из чего состоит блочная модель элемента

Блочная модель (box model) в CSS описывает структуру элемента, состоящую из нескольких слоёв:

1. Контент (content) — внутренняя часть элемента (текст, изображения и т.д.). Размеры задаются width/height.

2. Отступы (padding) — прозрачная область вокруг контента. Управляется через padding.

3. Граница (border) — рамка вокруг padding. Настраивается border-width, border-style, border-color.

4. Внешние отступы (margin) — прозрачное пространство за границей, отделяющее элемент от соседей. Контролируется margin.

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

Важно: по умолчанию width/height задают размер только контента. Если включить box-sizing: border-box, они будут включать padding и border.