Блочная модель CSS: margin, border, padding и content

Введение в блочную модель: базовые понятия 🏗️

Каждый HTML-элемент на странице — это прямоугольный блок, состоящий из слоёв, как луковица. Понимание блочной модели — фундамент вёрстки. Давайте разберём её на примере простой коробки:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid coral;
  margin: 30px;
}

💡 Факт: В стандартной блочной модели (box-sizing: content-box) итоговая ширина элемента = width + padding + border. Здесь это 200 + 40 (20×2) + 10 (5×2) = 250px.

Content: сердце блока 💝

Внутренняя область, где живёт ваш контент — текст, изображения, другие элементы. Размеры задаются свойствами:

.content {
  width: 300px;    /* Ширина */
  height: 150px;   /* Высота */
  min-width: 100px; /* Минимальная ширина */
  max-height: 200px; /* Максимальная высота */
}

⚠️ Важно: Если контент превышает размеры блока, он «вываливается» наружу. Используйте overflow для контроля!

Padding: воздух внутри 🛋️

Пространство между контентом и границей. Работает как мягкая подушка:

.padded-box {
  padding: 15px;             /* Все стороны */
  padding: 10px 20px;        /* Верх/Низ | Право/Лево */
  padding: 5px 10px 15px 20px; /* По часовой стрелке: Верх, Право, Низ, Лево */
}

Эффект: Увеличивает зону клика для кнопок, создаёт отступы внутри карточек.

Border: защитный барьер 🧱

Визуальная граница элемента. Может быть стилизована миллионом способов:

.border-madness {
  border: 2px dashed #FF6B6B;       /* Сплошная граница */
  border-radius: 10px;              /* Закругление углов */
  border-top: 5px dotted #4ECDC4;   /* Индивидуальные стороны */
}

✨ Профессиональный приём: Используйте transparent для невидимой границы, чтобы не «прыгала» вёрстка при добавлении бордера при ховере.

Margin: личное пространство 🚧

Отступы снаружи элемента, создающие дистанцию между соседями. Подчиняется тем же правилам, что и padding:

.spacious-box {
  margin: 0 auto;   /* Центрирование блочного элемента */
  margin-bottom: 40px; /* Отступ снизу */
}

Главное отличие от padding: Margin может схлопываться (collapsing) при соседстве вертикальных отступов.

Box-sizing: контроль над размерами 🎛️

По умолчанию браузеры считают ширину/высоту только контента (content-box), что неудобно. Переключитесь на border-box:

* {
  box-sizing: border-box; /* Теперь width включает padding и border! */
}

Пример: Блок с width: 200px, padding: 20px и border: 5px займёт ровно 200px, а не 250px.

Практика: создаём карточку товара 🛒

Соберём все знания в одном примере:

.product-card {
  width: 250px;
  padding: 20px;
  margin: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: white;
}

.product-card:hover {
  border-color: #FF9F1C; /* Анимация при наведении */
}

Что получилось:
1. Чёткая ширина 250px (благодаря border-box)
2. Внутренние отступы для текста
3. Внешние отступы между карточками
4. Граница с эффектом при наведении

Отладка блочной модели 🔍

Используйте инструменты разработчика:
1. Chrome DevTools → вкладка «Elements» → раздел «Box Model»
2. Firefox → «Inspector» → «Box Model»

🛠️ Совет от Данилы Бежина: Попробуйте выделять элементы через outline: 1px solid red; — это не влияет на блочную модель в отличие от border!

Итоги: 4 слоя блочной модели 🎯

Закрепите знания: Поиграйтесь с интерактивным конструктором блочной модели на CodePen!