Урок 16. Задания: display и поток документа
⚡ Кратко
Выполняйте задания в браузере и проверяйте каждый шаг через DevTools: меняйте display и наблюдайте поток.
Практические задания
Задание 1. block против inline
Сравните, как ведут себя div (block) и span (inline) без стилей. Поставьте по три элемента каждого типа.
Ожидаемый результат: три div — столбиком, три span — в ряд.
Задание 2. inline-block с размерами
Задайте трём ссылкам display: inline-block, фиксированную ширину и padding. Убедитесь, что они стоят в ряд, но имеют одинаковый размер.
Задание 3. Ряд бейджей
Соберите строку из 4–5 тегов-бейджей (inline-block, скруглённые углы, фон, отступы между ними через margin).
Задание 4. none против visibility
Поставьте два одинаковых списка. В первом спрячьте средний пункт через display: none, во втором — через visibility: hidden. Опишите разницу в потоке.
Задание 5. Объяснение
Письменно объясните, почему width не работает на чистом inline-элементе и какой режим это исправляет.