Как Box Model работает в браузере?

Box Model в браузере

Box Model (блочная модель) — это фундаментальная концепция CSS, которая описывает, как браузер рассчитывает размер и расположение элементов на странице. Это одна из самых важных вещей для понимания CSS.

Структура Box Model

Каждый HTML элемент — это коробка, состоящая из 4 слоёв:

┌─────────────────────────────────────────────┐
│           Margin (отступ снаружи)           │
│  ┌───────────────────────────────────────┐  │
│  │   Border (граница)                    │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │   Padding (внутренний отступ)   │  │  │
│  │  │  ┌─────────────────────────────┐│  │  │
│  │  │  │                             ││  │  │
│  │  │  │   Content (содержимое)      ││  │  │
│  │  │  │   (ширина x высота)         ││  │  │
│  │  │  │                             ││  │  │
│  │  │  └─────────────────────────────┘│  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
└─────────────────────────────────────────────┘

4 компонента Box Model

1. Content (Содержимое)

Content — это внутреннее содержимое элемента (текст, картинки, etc.). Размер определяется свойствами width и height:

.box {
  width: 200px;      /* Ширина содержимого */
  height: 100px;     /* Высота содержимого */
  background: blue;  /* Цвет фона содержимого */
}

<div class="box">Это содержимое (200px x 100px)</div>

2. Padding (Внутренний отступ)

Padding — это прозрачное пространство внутри элемента, между содержимым и границей:

.box {
  width: 200px;
  padding: 20px;           /* 20px со всех сторон */
  /* Или */
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  
  background: blue;        /* Фон распространяется на padding */
}

Что изменится:

• Общая ширина: 200px (content) + 15px (left) + 15px (right) = 230px
• Общая высота: 100px (content) + 10px (top) + 10px (bottom) = 120px

┌────────────────────────────────────┐
│ Padding: 20px                      │
│  ┌──────────────────────────────┐  │
│  │ Content (200px x 100px)      │  │
│  └──────────────────────────────┘  │
│ Padding: 20px                      │
└────────────────────────────────────┘

3. Border (Граница)

Border — это граница элемента, окружающая padding и content:

.box {
  width: 200px;
  padding: 20px;
  
  /* Все свойства */
  border: 2px solid red;
  
  /* Или отдельно */
  border-width: 2px;
  border-style: solid;    /* solid, dashed, dotted, double */
  border-color: red;
  
  /* Можно для каждой стороны */
  border-top: 2px solid red;
  border-right: 4px dashed blue;
  border-bottom: 1px dotted green;
  border-left: 3px double yellow;
}

Что изменится:

• Общая ширина: 200px + 40px (padding) + 4px (border) = 244px
• Общая высота: 100px + 40px (padding) + 4px (border) = 144px

┌──────────────────────────────────────────┐  <- Border (2px)
│ Padding                                  │
│  ┌────────────────────────────────────┐  │
│  │ Content                            │  │
│  └────────────────────────────────────┘  │
│ Padding                                  │
└──────────────────────────────────────────┘

4. Margin (Наружный отступ)

Margin — это прозрачное пространство снаружи элемента, между border и другими элементами:

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid red;
  
  /* Маржин со всех сторон */
  margin: 30px;
  
  /* Или отдельно */
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 30px;
}

Важно: Margin не входит в размер элемента, это пространство вокруг элемента.

Box-sizing свойство

Это критически важное свойство, которое меняет, как рассчитывается размер элемента:

content-box (по умолчанию)

.box {
  box-sizing: content-box; /* По умолчанию */
  width: 200px;
  padding: 20px;
  border: 2px solid red;
}

/* Общая ширина: 200px (content) + 40px (padding) + 4px (border) = 244px */

Проблема: width это только контент, поэтому элемент становится больше, чем ожидаешь.

border-box (рекомендуется)

/* ЛУЧШИЙ ВЫБОР */
* {
  box-sizing: border-box; /* Применяй ко всем элементам */
}

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid red;
}

/* Общая ширина: 200px (включая padding и border) */
/* Content ширина: 200px - 40px (padding) - 4px (border) = 156px */

Преимущество: width это полная ширина с padding и border, намного удобнее для макета.

Практические примеры

Пример 1: Простой элемент

.card {
  width: 300px;
  height: 200px;
  padding: 15px;
  border: 1px solid #ddd;
  margin: 20px;
  box-sizing: border-box; /* Важно!*/
  background: white;
}

<div class="card">Содержимое карточки</div>

Расчёт:

• Ширина content: 300px - 30px (padding) - 2px (border) = 268px
• Высота content: 200px - 30px (padding) - 2px (border) = 168px
• Расстояние от других элементов: 20px (margin)

Пример 2: Кнопка с правильными пропорциями

button {
  padding: 10px 20px;      /* 10px верх/низ, 20px левой/право */
  border: 2px solid #007bff;
  margin: 5px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

button:hover {
  background: #0056b3;
}

Пример 3: Контейнер с гэпом

.container {
  width: 100%;
  max-width: 1200px;
  padding: 20px;           /* Внутренний отступ */
  margin: 0 auto;          /* Центрирование */
  box-sizing: border-box;
}

.item {
  display: inline-block;
  width: 30%;
  margin-right: 5%;        /* Гэп между элементами */
  box-sizing: border-box;
}

Margin Collapse (схлопывание маржинов)

Это важный механизм, который часто ловушка для новичков:

<div style="margin-bottom: 30px;">Элемент 1</div>
<div style="margin-top: 20px;">Элемент 2</div>

<!-- Ожидаемое расстояние: 30px + 20px = 50px?
     Реальное расстояние: max(30px, 20px) = 30px -->

Когда происходит collapse:

• Между вертикальными элементами (margin-top и margin-bottom соседей)
• НЕ происходит между элементами с padding или border
• НЕ происходит для горизонтальных маржинов (margin-left, margin-right)

/* Решение: используй gap вместо margin */
.container {
  display: flex;
  flex-direction: column;
  gap: 30px;  /* Гарантированное расстояние */
}

Отрицательные маржины

.overlay {
  margin-top: -10px;  /* Поднимает элемент на 10px */
  margin-left: -20px; /* Сдвигает влево на 20px */
}

Инспектирование Box Model в DevTools

// Chrome DevTools: Elements tab
// 1. Выбери элемент
// 2. Смотри раздел "Computed"
// 3. Ниже видишь визуализацию Box Model

// Получить размеры элемента
const element = document.querySelector('.box');
const rect = element.getBoundingClientRect();

console.log('Width:', rect.width);      // Полная ширина
console.log('Height:', rect.height);    // Полная высота
console.log('Top:', rect.top);          // От верхнего края viewport
console.log('Left:', rect.left);        // От левого края viewport

// Получить вычисленные стили
const styles = window.getComputedStyle(element);
console.log('Margin:', styles.margin);
console.log('Padding:', styles.padding);
console.log('Border:', styles.border);

Shorthand синтаксис

/* Padding/Margin shorthand */
margin: 10px;                      /* Все стороны 10px */
margin: 10px 20px;                 /* Y: 10px, X: 20px */
margin: 10px 20px 15px;            /* Top, X, Bottom */
margin: 10px 20px 15px 5px;        /* Top, Right, Bottom, Left */

/* Border shorthand */
border: 2px solid red;             /* width, style, color */

/* Полный shorthand */
/* Не рекомендуется — слишком сложно */
padding: 10px;
margin: 5px;
border: 1px solid gray;

Реальный пример: построение макета

* {
  box-sizing: border-box;  /* Всегда начинай с этого */
}

body {
  margin: 0;  /* Браузер добавляет default margin */
  font-family: Arial, sans-serif;
}

.header {
  padding: 20px;
  background: #333;
  color: white;
  margin-bottom: 30px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;       /* Центрирование */
  padding: 0 20px;      /* Боковые отступы */
}

.card {
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 8px;
}

.footer {
  margin-top: 50px;     /* Расстояние от контента */
  padding: 20px;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
}

Вывод

Box Model — это основа CSS макетирования. Ключевые моменты:

1. Всегда используй box-sizing: border-box — это упростит расчёты
2. Margin — расстояние вокруг элемента (складывается)
3. Padding — расстояние внутри элемента (не складывается)
4. Border — граница элемента
5. Content — сам элемент

Понимание Box Model — это основа для правильного CSS макетирования и отладки визуальных проблем.