Scroll margin

Set physical scroll margins with spacing values, including negative values.

Use scroll-margin to add an outset around a target when the browser scrolls it into view, including fragment navigation and scroll snapping. It does not create visible layout space around the element.

Quick reference

Example class	Expected declarations
`scroll-m-6`	`scroll-margin-top: 1.5rem; scroll-margin-right: 1.5rem; scroll-margin-bottom: 1.5rem; scroll-margin-left: 1.5rem;`
`scroll-mx-8`	`scroll-margin-left: 2rem; scroll-margin-right: 2rem;`
`scroll-my-2`	`scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem;`
`scroll-mb-4`	`scroll-margin-bottom: 1rem;`
`scroll-ml-6`	`scroll-margin-left: 1.5rem;`
`scroll-mr-6`	`scroll-margin-right: 1.5rem;`
`scroll-mt-8`	`scroll-margin-top: 2rem;`

Example setup

The examples explicitly use spacingUnit: "0.25rem", reset: "none", strict mode and no breakpoints. Each preview contains a real link and target inside its own scrollable frame. Its native base element points to about:srcdoc so a fragment such as #top-target resolves within the preview document. Numeric suffixes multiply spacingUnit; no Tailwind scale or theme is inherited. wind-demo classes draw only the scroll frames and targets.

Examples in use

Keep a fragment target below the top edge

Follow the link to the target. scroll-mt-8 adds a 2rem outset at the target’s physical top side.

Keep a fragment target below the top edge

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#top-target">Jump to the target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-8" id="top-target">Target with scroll-mt-8</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-8 {
  scroll-margin-top: 2rem;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-8"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Set horizontal and vertical outsets

The two linked targets show scroll-my-2 on a vertical scroller and scroll-mx-8 on a horizontal scroller.

Set horizontal and vertical outsets

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller wind-demo-y-scroller">
    <a class="wind-demo-link" href="#axis-y">Jump to the vertical target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-my-2" id="axis-y">Vertical target with scroll-my-2</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
  <div class="wind-demo-scroller wind-demo-x-scroller">
    <a class="wind-demo-link" href="#axis-x">Jump to the horizontal target</a>
    <div class="wind-demo-track">
      <section class="wind-demo-target scroll-mx-8" id="axis-x">Horizontal target with scroll-mx-8</section>
    </div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-y-scroller {
  width: 17rem;
}

.wind-demo-x-scroller {
  width: 17rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-track {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 34rem;
  min-height: 7rem;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mx-8 {
  scroll-margin-left: 2rem;
  scroll-margin-right: 2rem;
}
.scroll-my-2 {
  scroll-margin-top: 0.5rem;
  scroll-margin-bottom: 0.5rem;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-y-scroller": true,
      "wind-demo-x-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-track": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mx-8",
        "scroll-my-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-y-scroller { width: 17rem; }
.wind-demo-x-scroller { width: 17rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-track { display: flex; align-items: center; justify-content: flex-end; width: 34rem; min-height: 7rem; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Set individual physical sides

The linked targets use scroll-mb-4, scroll-ml-6 and scroll-mr-6 so each edge can be inspected separately.

Set individual physical sides

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#bottom-target">Jump to the bottom-margin target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mb-4" id="bottom-target">Target with scroll-mb-4</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
  <div class="wind-demo-scroller wind-demo-x-scroller">
    <a class="wind-demo-link" href="#left-target">Jump to the left-margin target</a>
    <a class="wind-demo-link" href="#right-target">Jump to the right-margin target</a>
    <div class="wind-demo-track wind-demo-edge-track">
      <section class="wind-demo-target scroll-ml-6" id="left-target">scroll-ml-6</section>
      <section class="wind-demo-target scroll-mr-6" id="right-target">scroll-mr-6</section>
    </div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-x-scroller {
  width: 17rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-track {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 34rem;
  min-height: 7rem;
}

.wind-demo-edge-track {
  justify-content: space-between;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mb-4 {
  scroll-margin-bottom: 1rem;
}
.scroll-ml-6 {
  scroll-margin-left: 1.5rem;
}
.scroll-mr-6 {
  scroll-margin-right: 1.5rem;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-x-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-track": true,
      "wind-demo-edge-track": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mb-4",
        "scroll-ml-6",
        "scroll-mr-6"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-x-scroller { width: 17rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-track { display: flex; align-items: center; justify-content: flex-end; width: 34rem; min-height: 7rem; }
.wind-demo-edge-track { justify-content: space-between; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Set an outset on every side

The target sits at the lower-right of a two-axis scroller; scroll-m-6 sets all four physical sides.

Set an outset on every side

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller wind-demo-two-axis-scroller">
    <a class="wind-demo-link" href="#all-sides-target">Jump to the lower-right target</a>
    <div class="wind-demo-canvas">
      <section class="wind-demo-target scroll-m-6" id="all-sides-target">scroll-m-6 on all four sides</section>
    </div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-two-axis-scroller {
  width: 17rem;
  height: 9rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-canvas {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 34rem;
  height: 20rem;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-m-6 {
  scroll-margin-top: 1.5rem;
  scroll-margin-right: 1.5rem;
  scroll-margin-bottom: 1.5rem;
  scroll-margin-left: 1.5rem;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-two-axis-scroller": true,
      "wind-demo-link": true,
      "wind-demo-canvas": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-m-6"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-two-axis-scroller { width: 17rem; height: 9rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-canvas { display: flex; align-items: flex-end; justify-content: flex-end; width: 34rem; height: 20rem; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Name a reusable target offset

The example explicitly configures tokens.spacing.sticky to 3rem.

Name a reusable target offset

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#named-target">Jump to the named-token target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-sticky" id="named-target">scroll-mt-sticky · 3rem</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-sticky: 3rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-sticky {
  scroll-margin-top: var(--zw-spacing-sticky);
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "sticky": "3rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-sticky"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Use a one-off scroll offset

scroll-mt-[72px] sets the target’s top scroll margin to 72px.

Use a one-off scroll offset

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#arbitrary-target">Jump to the arbitrary-value target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-[72px]" id="arbitrary-target">scroll-mt-[72px]</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-\[72px\] {
  scroll-margin-top: 72px;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-[72px]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Use a negative scroll margin

-scroll-mt-4 uses the supported negative policy to reduce the target’s top outset by 1rem.

Use a negative scroll margin

HTML

<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#negative-target">Jump to the negative-margin target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target -scroll-mt-4" id="negative-target">-scroll-mt-4</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.-scroll-mt-4 {
  scroll-margin-top: -1rem;
}

Head

<base href="about:srcdoc">

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "-scroll-mt-4"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

Custom and named values

scroll-m-0 removes the outset and scroll-m-px uses 1px without a spacing token. Other numeric suffixes need tokens.spacingUnit; named values such as scroll-mt-sticky need tokens.spacing; arbitrary lengths such as scroll-mt-[72px] need no spacing token. Negative values are supported with a dash before the root, as in -scroll-mt-4. The x and y roots use physical sides: scroll-mx means left and right, scroll-my means top and bottom. The side roots are also physical, not logical start/end directions. Set scroll-margin on the target whose position matters; use scroll-padding on the scroll container when you need an inset for all of its targets.

Related guides: Utility grammar · Variants

Catalog details

scroll-m

Field	Value
Catalog identifier	`v1.scroll-m`
Class pattern	`scroll-m-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-top`, `scroll-margin-right`, `scroll-margin-bottom`, `scroll-margin-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-top`	`resolved`	`null`
`scroll-margin-right`	`resolved`	`null`
`scroll-margin-bottom`	`resolved`	`null`
`scroll-margin-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-m-0`	`scroll-margin-top: 0`; `scroll-margin-right: 0`; `scroll-margin-bottom: 0`; `scroll-margin-left: 0`

scroll-mx

Field	Value
Catalog identifier	`v1.scroll-mx`
Class pattern	`scroll-mx-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-left`, `scroll-margin-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-left`	`resolved`	`null`
`scroll-margin-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-mx-0`	`scroll-margin-left: 0`; `scroll-margin-right: 0`

scroll-my

Field	Value
Catalog identifier	`v1.scroll-my`
Class pattern	`scroll-my-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-top`, `scroll-margin-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-top`	`resolved`	`null`
`scroll-margin-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-my-0`	`scroll-margin-top: 0`; `scroll-margin-bottom: 0`

scroll-mb

Field	Value
Catalog identifier	`v1.scroll-mb`
Class pattern	`scroll-mb-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-bottom","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-mb-0`	`scroll-margin-bottom: 0`

scroll-ml

Field	Value
Catalog identifier	`v1.scroll-ml`
Class pattern	`scroll-ml-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-ml-0`	`scroll-margin-left: 0`

scroll-mr

Field	Value
Catalog identifier	`v1.scroll-mr`
Class pattern	`scroll-mr-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-right","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-mr-0`	`scroll-margin-right: 0`

scroll-mt

Field	Value
Catalog identifier	`v1.scroll-mt`
Class pattern	`scroll-mt-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`allowed`
Conflict group and rank	`scroll-margin` (`43`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`scroll-margin-top`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`scroll-margin-top`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`scroll-mt-0`	`scroll-margin-top: 0`

Scroll margin

Quick reference

Examples in use

Keep a fragment target below the top edge

Set horizontal and vertical outsets

Set individual physical sides

Set an outset on every side

Name a reusable target offset

Use a one-off scroll offset

Use a negative scroll margin

Custom and named values

scroll-m

Accepted values

Declaration templates

Catalog examples

scroll-mx

Accepted values

Declaration templates

Catalog examples

scroll-my

Accepted values

Declaration templates

Catalog examples

scroll-mb

Accepted values

Declaration templates

Catalog examples

scroll-ml

Accepted values

Declaration templates

Catalog examples

scroll-mr

Accepted values

Declaration templates

Catalog examples

scroll-mt

Accepted values

Declaration templates

Catalog examples

Revision History