Andrew's Digital Garden

Scroll margin

Elements with an id can be scrolled to using the # prefix in the browser URL. However when the browser scrolls to that location, that element will be flush to the top of the viewport, which looks suboptimal.

To counter this, we can use scroll-margin-top.

For a generic catch-all that works well across any element that may be scrolled to, the following snippet can be used.

[id] { scroll-margin-top: 2ex; }

ex uses the vertical height of the chosen font for the element.

[[css]]

Scroll margin