scroll-padding

Отступ для якорных точек прокрутки под липкими шапками.

Уровень: средний 10 разделов 10 минут

1. Что это и зачем

Отступ для якорных точек прокрутки под липкими шапками.

Современный CSS добавляет инструменты, которые раньше требовали JavaScript или препроцессоров: переменные (custom properties), каскадные слои (@layer), логические свойства, container queries, :has(), @property.

{title} — это инструменты, которые ведут CSS в будущее: осваивайте их по мере набора опыта.

2. Синтаксис и пример

.page { scroll-padding-top: 80px; }

Запись выше — базовый вариант использования. Обратите внимание, как scroll-padding вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Свойства группируются по назначению: переменные для тем, слои для порядка каскада, логические свойства для направлений, контейнерные запросы для независимой адаптации компонентов.

В реальной разметке scroll-padding встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это инструменты, которые ведут CSS в будущее: осваивайте их по мере набора опыта.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Бóльшая часть современных возможностей — в свежих версиях всех браузеров. Используйте @supports и fallback, чтобы старый браузер получил упрощённый, но рабочий вид.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Показывает точку «прилипания» под фиксированным меню.

Править руками координаты якорей утомительно.

7. Практическое задание

Добавьте отступ скролла под шапку.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.page { scroll-padding-top: 80px; }

8. Как применять в проектах

Темы на переменных, компоненты с контейнерными запросами, правила с @layer вместо ритуальных !important, логическая вёрстка для интернационализации.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

переменные для часто меняющихся значений;
@layer упорядочивает каскад явно;
для новых свойств есть fallback;
:has() не вешает правила на всё и сразу;
логические свойства там, где меняется направление;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам