scroll-margin

Represents outsets defining the scroll snap area that is used for snapping this box to the snapport. 5.1. Scroll Snapping Area: the scroll-margin property

Links about scroll-margin

1. How to prevent anchor links from scrolling behind a sticky header with one line of CSS

   posted on March 3, 2020 by Chris Ferdinandi

   Yesterday, we looked at how to create sticky headers with the position: sticky CSS property. One problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu. You can see it yourself in this demo. Today, I want to talk about a CSS …

   

2. Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks

   posted on February 21, 2020 by Chris Coyier

   The problem: you click a jump link like <a href=”#header-3″>Jump</a> which links to something like <h3 id=“header-3”>Header</h3>.

   

3. scroll-margin

   posted on December 17, 2019 by MDN

   The scroll-margin property is a shorthand property which sets all of the scroll-margin longhands, assigning values much like the margin property does for the margin-* longhands.

   

4. scroll-margin-top / scroll-padding, smooth scroll and fixed headers

   by Sven Wolfermann

   

5. fixed headers jump :target (IE11 version)

   by Sven Wolfermann

   

Code sample

section {
	scroll-margin-top: 2rem;
}