scroll-margin-block-start
Sets the 'snap margin' at the start of an element. This is perfect for ensuring that when you scroll to a section, your 'sticky' header doesn't cover up the section's' title.
It is documented as part of the CSS Scroll Snap specification.
Syntax
/* Usage Example */
section {
/* Prevents a sticky header (fixed to top) from covering the section heading */
scroll-margin-block-start: 80px;
scroll-snap-align: start;
}
/* Global values */
scroll-margin-block-start: inherit;
scroll-margin-block-start: initial;
scroll-margin-block-start: revert;
scroll-margin-block-start: revert-layer;
scroll-margin-block-start: unset;scroll-margin-block-start 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+
68+
15+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more