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

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

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

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

plaintext

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

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

css