Дайте рецепту дышать
Текст готов, но всё сжато: Preflight убрал все внешние отступы. Теперь дайте рецепту простор:
- Рецепт лежит на белой карточке с внутренним отступом 32 px со всех сторон. От краёв страницы карточка отстоит на 24 px.
- То, что относится друг к другу, стоит близко: название на 8 px ниже подписи, а каждый заголовок на 8 px выше своего списка или абзаца.
- Абзац под названием на 16 px ниже него.
- Части рецепта расположены дальше друг от друга: каждый заголовок на 32 px ниже предыдущей части.
- У двух абзацев строки просторнее, не меньше чем в 1,6 раза выше размера их текста, чтобы их было удобно читать.
Совет: вспомните привычку из урока об отступах и размерах: между элементами, идущими друг под другом, делайте отступ только с одной стороны, например всегда верхний внешний отступ. Проверки измеряют расстояния в окне просмотра, поэтому неважно, каким элементам вы зададите классы.
Задание
- 1
Положите рецепт на белую карточку с внутренним отступом 32 px, на расстоянии 24 px от краёв страницы.
- 2
Добавьте промежутки между частями рецепта и между строками абзацев, как описано выше.