Урок 16. Старый vs Новый: display и поток документа

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

⚡ Кратко

Хороший CSS не только даёт нужный вид, но и остаётся предсказуемым. Чтобы строчный элемент получил размеры — не «боритесь» с потоком, а явно смените режим на inline-block.

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

Задача: сделать ссылку-бейдж фиксированной ширины с внутренними отступами.

Неудачно: задать ширину обычной inline-ссылке

бейдж ← width:180px проигнорирован, padding ломает строку 
a.badge {
  width: 180px;   /* игнорируется у inline */
  padding: 12px;  /* раздувает строку непредсказуемо */
}

Обычная inline-ссылка не ведёт себя как блок: ширина не применяется, вертикальный padding наезжает на соседние строки.

Лучше: явно выбрать inline-block

бейдж ← ширина и padding работают, строка цела 
a.badge {
  display: inline-block;
  width: 180px;
  padding: 12px;
}

Элемент остаётся в строке, но получает управляемую ширину и корректные отступы.

Вывод: не подбирайте обходные пути под нужный display по умолчанию — выберите подходящий режим явно. Для рядов с выравниванием в современном CSS чаще берут display: flex.