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

CSS box model описывает, из чего состоит прямоугольник любого элемента: content, padding, border и margin.

Слои изнутри наружу

• content — содержимое: текст, картинка, дочерние элементы; его размер задают width и height.
• padding — внутренний отступ между содержимым и рамкой; окрашивается фоном элемента.
• border — рамка.
• margin — внешний отступ до соседних элементов; всегда прозрачный.

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px;
}
/* при box-sizing: content-box ширина на экране = 200 + 16·2 + 2·2 = 236px */

Коротко для собеседования

Элемент — это content, вокруг него padding, border и margin; то, как они складываются в итоговый размер, задаёт box-sizing.

Подробнее: MDN — Блочная модель