Урок 16. Решения: display и поток документа

Разбор заданий

1. block против inline

Block-элементы (div) занимают отдельную строку, строчные (span) текут в ряд внутри текста.

<div>div 1</div><div>div 2</div>
<span>span 1</span><span>span 2</span>

2 и 3. inline-block: ссылки и бейджи

Режим inline-block даёт строку из элементов с управляемыми размерами и отступами.

.badge {
  display: inline-block;
  width: 80px;
  padding: .3rem;
  margin: .2rem;
  border-radius: 999px;
  background: #e0f2fe;
}

4. none против visibility

При display: none средний пункт исчезает и соседи сдвигаются. При visibility: hidden остаётся пустое место.

li.gone     { display: none; }      /* строка B исчезла */
li.invisible { visibility: hidden; } /* пустая строка осталась */

5. Почему width не работает на inline

Чистый inline-элемент течёт внутри строки и подстраивается под содержимое — модель строки не предусматривает явную ширину/высоту. Режимы inline-block, block или flex-ребёнок дают элементу прямоугольный размер, и width начинает действовать.