Scroll Margin

Utilities for controlling the scroll offset around items in a snap container.

Class CSS Output
scroll-m-0
scroll-margin: calc(var(--spacing) * 0);
}
scroll-m-4
scroll-margin: calc(var(--spacing) * 4);
}
scroll-m-8
scroll-margin: calc(var(--spacing) * 8);
}
scroll-m-auto
scroll-margin: auto;
}
scroll-m-px
scroll-margin: 1px;
}
scroll-m-[value]
scroll-m: [value]
}
-scroll-m-4
scroll-margin: calc(var(--spacing) * -4);
}
scroll-mx-0
scroll-margin-inline: calc(var(--spacing) * 0);
}
scroll-mx-4
scroll-margin-inline: calc(var(--spacing) * 4);
}
scroll-mx-8
scroll-margin-inline: calc(var(--spacing) * 8);
}

scroll-m-0

scroll-margin: calc(var(--spacing) * 0);

scroll-m-4

scroll-margin: calc(var(--spacing) * 4);

scroll-m-8

scroll-margin: calc(var(--spacing) * 8);

scroll-m-auto

scroll-margin: auto;

scroll-m-px

scroll-margin: 1px;

scroll-m-[value]

scroll-m: [value]

-scroll-m-4

scroll-margin: calc(var(--spacing) * -4);

scroll-mx-0

scroll-margin-inline: calc(var(--spacing) * 0);

scroll-mx-4

scroll-margin-inline: calc(var(--spacing) * 4);

scroll-mx-8

scroll-margin-inline: calc(var(--spacing) * 8);

Reference

CSS Properties

  • scroll-m
  • scroll-margin
  • scroll-margin-inline