Вёрстка: Свойство scroll-margin-top определяет размер верхнего отступа внутри контейнера прокрутки

Свойство scroll-margin-top в CSS определяет размер верхнего отступа вокруг элемента внутри контейнера прокрутки, что влияет на окончательное положение элемента при прокрутке, например, при использовании якорных ссылок. Это свойство особенно полезно при наличии фиксированной верхней панели или других элементов, которые могут перекрывать часть содержимого при прокрутке до него.

Пример

В примере есть три раздела, к которым можно прокрутить страницу по якорным ссылкам. Использование scroll-margin-top: 80px; гарантирует, что при прокрутке к разделу верхняя часть раздела не будет перекрыта фиксированным заголовком, обеспечивая чёткую видимость содержимого.

Html код части страницы:

<header style="position: fixed; top: 0; width: 100%; background: lightgray; padding: 20px; text-align: center;">
	Фиксированный заголовок
</header>
<div style="height: 100px;"></div> <!-- Дополнительное пространство -->

<div id="section1" class="section">Раздел 1</div>
<div id="section2" class="section">Раздел 2</div>
<div id="section3" class="section">Раздел 3</div>

<nav style="position: fixed; bottom: 20px; width: 100%; text-align: center;">
	<a href="#section1">Перейти к Разделу 1</a> |
	<a href="#section2">Перейти к Разделу 2</a> |
	<a href="#section3">Перейти к Разделу 3</a>
</nav>

CSS:

.section {
    height: 500px;
    border: 2px solid black;
    margin-top: 50px;
    padding: 20px;
    font-size: 24px;

	# Отступ сверху для прокрутки 
    scroll-margin-top: 80px; 
}