CSS scroll margin

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.^[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 areaThe 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.^[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.^[ref]