scroll-margin
Defines the margin (offset) of an element when it is scrolled into view via scroll-snapping or anchor links. This is extremely useful for preventing fixed headers from covering the top of a section.
It is documented as part of the CSS Scroll Snap specification.
Syntax
/* Usage Example */
section {
scroll-margin-top: 100px;
/* prevents a fixed header from overlapping the section when navigating via ID links */
}
/* Global values */
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: revert;
scroll-margin: revert-layer;
scroll-margin: unset;scroll-margin Browser support
Widely available
Since
2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
69+
90+
14.1+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more