Что такое боксовая модель, из чего она состоит и какие существуют её виды?

Боксовая модель (CSS Box Model) — это абстрактная сущность, описывающая, как элементы HTML представляются на странице в виде прямоугольных блоков. Она определяет размеры и расположение содержимого, внутренних отступов, границ и внешних отступов элемента.

Боксовая модель состоит из следующих частей:

• Content: Содержимое элемента (текст, изображения и т.д.). Его размер определяется свойствами width и height.
• Padding: Пространство между содержимым элемента и его границей. Определяется свойствами padding-top, padding-right, padding-bottom, padding-left или сокращенным свойством padding.
• Border: Граница вокруг внутреннего отступа и содержимого. Определяется свойствами border-width, border-style, border-color или сокращенным свойством border.
• Margin: Пространство между границей элемента и внешними элементами. Определяется свойствами margin-top, margin-right, margin-bottom, margin-left или сокращенным свойством margin.

Существуют два основных вида боксовой модели, определяемые свойством box-sizing:

• content-box (значение по умолчанию): Ширина и высота элемента, заданные свойствами width и height, относятся только