Codectionary / Developer documentation / CSS

Space around Scroll Targets

scroll-margin expands the effective area used around a target for relevant scrolling operations and snapping.

What it is and why to use it

scroll-margin expands the effective area used around a target for relevant scrolling operations and snapping. It is useful when a heading reached by a fragment link would otherwise sit underneath a sticky header. It does not add ordinary layout margin or change the element’s box size.

Common mistakes and limitations

The browser can only scroll within available bounds, so an offset is not guaranteed near the end of a short region. Fragment navigation may affect multiple scrollable ancestors. Test keyboard focus separately from visual target positioning.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<a href="#lesson">Jump to lesson</a><div class="panel"><div class="spacer">Start</div><h3 id="lesson">Lesson heading</h3><div class="tail">Practice</div></div>

Syntax

scroll-margin-block-start: 4rem;

Examples

Space around Scroll Targets

Run the CSS against the supplied HTML, then experiment with the values.

.panel { height: 10rem; overflow: auto; border: 1px solid #94a3b8; }
.spacer { height: 10rem; }
#lesson { scroll-margin-block-start: 2rem; }
.tail { height: 12rem; }
  1. The link targets the heading by its id.
  2. The heading requests extra space before its scroll target area.
  3. The panel contains enough trailing space for the requested offset to be visible. Use this pattern for anchored sections beneath persistent headers.
HTML used by this example
<div class="demo"><a href="#lesson">Jump to lesson</a><div class="panel"><div class="spacer">Start</div><h3 id="lesson">Lesson heading</h3><div class="tail">Practice</div></div></div>

Best practices

  • The browser can only scroll within available bounds, so an offset is not guaranteed near the end of a short region. Fragment navigation may affect multiple scrollable ancestors. Test keyboard focus separately from visual target positioning.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading