Spacing
scroll-margin
Setting the scroll margin of an element.
Overview
| Class | Declarations |
|---|---|
scroll-m:<size> | scroll-margin: <size>;
|
scroll-m:<vertical>|<horizontal> | scroll-margin: <vertical> <horizontal>;
|
scroll-m:<top>|<horizontal>|<bottom> | scroll-margin: <top> <horizontal> <bottom>;
|
scroll-m:<top>|<right>|<bottom>|<left> | scroll-margin: <top> <right> <bottom> <left>;
|
scroll-mt:<size> | scroll-margin-top: <size>;
|
scroll-mr:<size> | scroll-margin-right: <size>;
|
scroll-mb:<size> | scroll-margin-bottom: <size>;
|
scroll-ml:<size> | scroll-margin-left: <size>;
|
scroll-mx:<size> | scroll-margin-inline: <size>;
|
scroll-mx:<inline-start>|<inline-end> | scroll-margin-inline: <inline-start> <inline-end>;
|
scroll-my:<size> | scroll-margin-block: <size>;
|
scroll-my:<block-start>|<block-end> | scroll-margin-block: <block-start> <block-end>;
|
scroll-mxs:<size> | scroll-margin-inline-start: <size>;
|
scroll-mxe:<size> | scroll-margin-inline-end: <size>;
|
scroll-mys:<size> | scroll-margin-block-start: <size>;
|
scroll-mye:<size> | scroll-margin-block-end: <size>;
|
Examples
Offset anchor targets
Use scroll-mt:* on the target element so anchor navigation leaves room for fixed headers.
<section id="pricing" class="scroll-mt:16x"> Pricing</section>Generated CSS
@layer utilities { .scroll-mt\:16x { scroll-margin-top: 4rem }}Add horizontal snap margin
Use scroll-mx:* on snap items when the item should stop with space on both sides.
<article class="snap-start scroll-mx:4x"> Slide</article>Use all-side margin for compact cases
Use scroll-m:* when the same offset should apply on every side of the target.
<h2 class="scroll-m:0.625rem">Overview</h2>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<section class="scroll-mt:16x scroll-mt:8x@sm scroll-m:0@print">...</section>