Блочная модель

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

Компоненты блочной модели

1. Содержимое (Content):
   • Это внутренняя часть элемента, где отображается текст, изображения или другие элементы.
   • Размеры содержимого определяются свойствами width (ширина) и height (высота).
2. Внутренний отступ (Padding):
   • Это пространство между содержимым и границей элемента.
   • Управляется свойствами padding-top, padding-right, padding-bottom, padding-left или сокращенным свойством padding.
3. Граница (Border):
   • Это рамка вокруг элемента, которая находится между внутренним отступом и внешним отступом.
   • Управляется свойствами border-width, border-style, border-color или сокращенным свойством border.
4. Внешний отступ (Margin):
   • Это пространство между границей элемента и соседними элементами.
   • Управляется свойствами margin-top, margin-right, margin-bottom, margin-left или сокращенным свойством margin.

Схема блочной модели

 +---------------------------+
 |         Margin            |
 |  +---------------------+  |
 |  |      Border         |  |
 |  |  +--------------+   |  |
 |  |  |   Padding    |   |  |
 |  |  |  +--------+  |   |  |
 |  |  |  | Content|  |   |  |
 |  |  |  +--------+  |   |  |
 |  |  +--------------+   |  |
 |  +---------------------+  |
 +---------------------------+

Размеры элемента

Общий размер элемента складывается из:

• Ширина: width + padding-left + padding-right + border-left + border-right.
• Высота: height + padding-top + padding-bottom + border-top + border-bottom.

Свойство box-sizing

По умолчанию размеры элемента (width и height) относятся только к содержимому. Это может быть неудобно, так как добавление отступов и границ увеличивает общий размер элемента. Чтобы изменить это поведение, используется свойство box-sizing.

1. content-box (по умолчанию):
   • Размеры элемента (width и height) относятся только к содержимому.
   • Отступы и границы добавляются к общему размеру.
2. border-box:
   • Размеры элемента включают содержимое, отступы и границы.
   • Это упрощает расчеты и делает поведение более предсказуемым.

Вывод:

• Блочная модель CSS состоит из содержимого, внутренних отступов, границ и внешних отступов.
• Свойство box-sizing позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
• Понимание блочной модели важно для создания точных и предсказуемых макетов.

🚀 Источник: DeepSeek