= CSS scroll margin
{c}
<CSS scroll margin> supplies outsets around an element's transformed border bounds to define its <CSS scroll snap area>. The `scroll-margin` shorthand assigns top, right, bottom and left values using the usual one-to-four-value ordering. In the pinned specification these values are lengths, rather than percentages.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.1, scroll-margin syntax, ordering and area construction]{ref}
For an own example, let an untransformed <CSS border box> occupy $[200,300]\times[100,150]$ in content coordinates measured in <CSS pixels>. Set `scroll-margin: 20px 10px;`. The first value applies at top and bottom, and the second at left and right, giving the snap area
$$
[200-10,300+10]\times[100-20,150+20]
=[190,310]\times[80,170].
$$
The box itself is still $100$ by $50$ pixels; the alignment region is $120$ by $90$.
Suppose a reachable horizontal start alignment should place this area's left edge at coordinate $30$ within the <CSS snapport>. With a left-to-right horizontal convention, the candidate offset satisfies $190-s_x=30$, giving $s_x=160$. Without the left outset, it would instead be $200-30=170$. The extra target-side room changes the alignment computation without changing where the border is laid out in the content.
The construction uses the axis-aligned <bounding box> of the transformed border box before adding the outsets. A rotated <CSS transform> can therefore affect the base rectangle, even though the resulting snap area remains rectangular in the scroll container's coordinates.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.1, transformed bounds and axis alignment]{ref}
<CSS scroll margin> and ordinary layout margins serve different purposes. The former does not assign this extra space between neighboring elements in normal layout. It is also distinct from <CSS scroll padding>, which adjusts the viewing/alignment region on the container side.
The specification recommends using the snap area for fragment targets and `scrollIntoView()` targeting even when snapping is disabled or does not apply to the element. The property can consequently express useful target-side breathing room beyond a mandatory snapping interaction.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.1, targeted scrolling note]{ref}
Back to article page
