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

Каждый HTML-элемент — это прямоугольник. CSS управляет размером этого прямоугольника через четыре слоя: content, padding, border, margin. Вместе они называются блочной моделью (box model).

Четыре слоя

┌──────────────────────────────────┐
│            margin                │
│  ┌────────────────────────────┐  │
│  │          border            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │       padding        │  │  │
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │    content     │  │  │  │
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

• content — сам текст или изображение. Размер задаётся через width и height.
• padding — внутренний отступ между контентом и рамкой. Фон распространяется на padding.
• border — рамка вокруг padding. Видима, занимает место.
• margin — внешний отступ. Прозрачный, отделяет элемент от соседей.

Пример в CSS

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  margin: 24px;
}

<div class="card">
  <h2>Статья про Python</h2>
  <p>Краткое описание...</p>
</div>

Проблема: width по умолчанию не включает padding и border

По умолчанию браузер считает width как ширину только контента. Padding и border добавляются сверху.

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
}
/* Реальная ширина: 300 + 16*2 + 2*2 = 336px */

Это неинтуитивно и ведёт к неожиданным сдвигам в вёрстке.

Решение: box-sizing: border-box

* {
  box-sizing: border-box;
}

С этим правилом width включает padding и border — элемент ровно такой ширины, какую вы указали.

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
}
/* Реальная ширина: 300px — ровно столько, сколько написали */

Всегда добавляйте box-sizing: border-box в начало вашего CSS. Это первое правило в любом серьёзном проекте.

Shorthand: сокращённая запись

padding и margin можно писать одной строкой:

/* Все четыре стороны одинаковые */
padding: 16px;

/* Вертикальные | горизонтальные */
padding: 8px 16px;

/* Верх | горизонтальные | низ */
padding: 8px 16px 12px;

/* Верх | право | низ | лево (по часовой) */
padding: 8px 16px 12px 0;

То же самое для margin.

Отдельные стороны

.card {
  margin-top: 24px;
  margin-bottom: 24px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #e5e7eb;  /* только нижняя рамка */
}

Схлопывание margin (margin collapse)

Вертикальные margin между соседними блоками схлопываются — берётся наибольший, а не сумма.

.article-title {
  margin-bottom: 24px;
}

.article-meta {
  margin-top: 16px;
}
/* Отступ между ними: 24px, а не 40px */

Это частая причина удивления у новичков. Горизонтальные margin не схлопываются.

DevBlog: базовые правила для карточки статьи

/* Сбрасываем box-sizing для всех элементов */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Карточка статьи */
.post-card {
  width: 100%;
  max-width: 680px;
  padding: 24px;
  margin-bottom: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.post-card h2 {
  margin-top: 0;      /* убираем отступ сверху у первого заголовка */
  margin-bottom: 8px;
}

.post-card p {
  margin: 0;
}

Итог