scroll-margin

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

Examples

Basic example

Use the scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities like scroll-ml-4 and scroll-mt-6 to set the scroll offset around items within a snap container:

Using negative values

To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value:

<!-- [!code classes:-scroll-ml-6] -->
<div class="snap-start -scroll-ml-6 ...">
  <!-- ... -->
</div>

Using logical properties

Use the scroll-ms-<number> and scroll-me-<number> utilities to set the scroll-margin-inline-start and scroll-margin-inline-end logical properties, which map to either the left or right side based on the text direction:

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

Use the scroll-mbs-<number> and scroll-mbe-<number> utilities to set the scroll-margin-block-start and scroll-margin-block-end logical properties, which map to either the top or bottom side based on the writing mode:

<!-- [!code classes:scroll-mbs-6] -->
<div class="snap-y ...">
  <div class="snap-start scroll-mbs-6 ...">
    <!-- ... -->
  </div>
</div>

Using a custom value

Responsive design

Customizing your theme