Урок 15. Старый vs Новый: Блочная модель: content, padding, border, margin

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная
#width #padding #border #margin

⚡ Кратко

Хороший CSS не только даёт нужный вид, но и остаётся предсказуемым при изменениях.

Сравнение подходов

Неудачно: Расстояния через случайные margin у каждого элемента

.card h2 { margin-bottom: 30px; }
.card p { margin-top: 18px; }
.card a { margin-top: 25px; }

Такой код трудно предсказать: отступы конфликтуют и схлопываются.

Лучше: Единый ритм внутри компонента

.card {
  padding: 24px;
}

.card > * + * {
  margin-top: 16px;
}

Отступи управляются в одном месте, поведение легче контролировать.