Урок 04. Задания
⚡ Кратко
Три задания на отступы и размеры плюс четыре вопроса.
Задания
Задание 1. Перевести значения в классы
Запишите утилитами: padding 24px со всех сторон; padding 8px сверху и снизу, 16px слева и справа; margin-top 32px; ширина 50%; квадрат 40×40.
Задание 2. Список без «хвостов»
Соберите вертикальный список из четырёх строк с промежутком 12px так, чтобы
у первого элемента не было отступа сверху, а у последнего — снизу.
Сделайте это без :first-child и :last-child.
Задание 3. Полоса заголовка
Сверстайте полосу: контент по центру страницы, ширина не больше 48rem, боковые отступы 16px на мобильном и 32px от 768px, вертикальные — 24px.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Сколько пикселей даёт p-6 при стандартной шкале?
Вопрос 2
Каким классом задать промежуток между элементами flex-контейнера?
Вопрос 3
Что делает size-12?
Вопрос 4
Чем ps-4 отличается от pl-4?