Из чего состоит CSS box model

CSS box model описывает структуру элементов на странице и состоит из:

1. Контент (content) - внутренняя часть, где отображается текст/изображения
2. Padding - отступ между контентом и границей
3. Border - рамка вокруг padding
4. Margin - внешний отступ от границы до других элементов

.box {
  width: 200px; /* ширина контента */
  padding: 20px; /* внутренние отступы */
  border: 5px solid #333; /* граница */
  margin: 30px; /* внешние отступы */
}

Важно: по умолчанию width задаёт ширину только контента, а общая ширина элемента = width + padding + border + margin. Это можно изменить через box-sizing: border-box, тогда width будет включать padding и border.