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

Блочная модель в CSS описывает, как рассчитывается пространство, занимаемое элементом на веб-странице. Она включает в себя:

• Content (содержимое): Область для фактического содержимого элемента (текст, изображения).
• Padding (внутренние отступы): Пространство между содержимым и границей элемента.
• Border (граница): Граница, окаймляющая padding и content.
• Margin (внешние отступы): Пространство вокруг границы элемента, отделяющее его от других элементов.

Размер элемента по умолчанию (в стандартной модели box-sizing: content-box) определяется суммой размеров content, padding и border. Margin добавляется к общему занимаемому пространству, но не влияет на размер самого элемента.

Свойство box-sizing: border-box изменяет расчет размера элемента, включая padding и bord