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
How to prevent anchor links from scrolling behind a sticky header with one line of CSS
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 …
Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks
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>.
scroll-margin
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.
Code sample
section {
scroll-margin-top: 2rem;
}
Explore other pages
- :not()
Represents an element that is not represented by its argument.
- content-visibility
Controls whether or not an element renders its contents at all.
- tabindex
Sets tab order and defines whether an element can be focused or not."
- placeholder
Represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.