Что такое блочная модель в CSS?

В CSS блочная модель описывает прямоугольную область, которая генерируется для каждого элемента и используется для расчета его размеров и положения. Она состоит из четырёх частей:

• Content box: Область, где отображается содержимое элемента (текст, изображения и т. д.). Её размер определяется свойствами width и height.
• Padding box: Пространство между границей содержимого и границей элемента. Размер определяется свойствами padding. Фоновый цвет и изображение элемента распространяются на эту область.
• Border box: Граница элемента, окружающая padding box. Её размер определяется свойствами border.
• Margin box: Пространство вокруг границы элемента, отделяющее его от других элементов. Размер определяется свойствами margin. Эта область всегда полностью прозрачна.

Размер элемента по умолчанию рассчитывается следующим образом:

ширина = width + padding-left + padding-right + border-left-width + border-right-width
высота = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Свойство box-sizing позволяет изменить эту модель:

• content-box (по умолчанию): Размеры width и height относятся только к content box.
• border-box: Размеры width и height включают в себя padding и border.

.element-default {
  width: 100px; /* Ширина content box = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Фактическая ширина элемента: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Фактическая ширина элемента = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Ширина content box: 100 - 10 - 10 - 5 - 5 = 70px */
}