---
sidebar_position: 4
---

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

**Блочная модель 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_**