scroll-margin

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página

Examples#
Basic example#
Using negative values#
Using logical properties#
Using a custom value#
Responsive design#
Customizing your theme#

Clase	Propiedades CSS
`scroll-m-<number>`	`scroll-margin: calc(var(--spacing) * <number>);`
`-scroll-m-<number>`	`scroll-margin: calc(var(--spacing) * -<number>);`
`scroll-m-px`	`scroll-margin: 1px;`
`-scroll-m-px`	`scroll-margin: -1px;`
`scroll-m-(<custom-property>)`	`scroll-margin: var(<custom-property>);`
`scroll-m-[<value>]`	`scroll-margin: <value>;`
`scroll-mx-<number>`	`scroll-margin-inline: calc(var(--spacing) * <number>);`
`-scroll-mx-<number>`	`scroll-margin-inline: calc(var(--spacing) * -<number>);`
`scroll-mx-px`	`scroll-margin-inline: 1px;`
`-scroll-mx-px`	`scroll-margin-inline: -1px;`
`scroll-mx-(<custom-property>)`	`scroll-margin-inline: var(<custom-property>);`
`scroll-mx-[<value>]`	`scroll-margin-inline: <value>;`
`scroll-my-<number>`	`scroll-margin-block: calc(var(--spacing) * <number>);`
`-scroll-my-<number>`	`scroll-margin-block: calc(var(--spacing) * -<number>);`
`scroll-my-px`	`scroll-margin-block: 1px;`
`-scroll-my-px`	`scroll-margin-block: -1px;`
`scroll-my-(<custom-property>)`	`scroll-margin-block: var(<custom-property>);`
`scroll-my-[<value>]`	`scroll-margin-block: <value>;`
`scroll-ms-<number>`	`scroll-margin-inline-start: calc(var(--spacing) * <number>);`
`-scroll-ms-<number>`	`scroll-margin-inline-start: calc(var(--spacing) * -<number>);`
`scroll-ms-px`	`scroll-margin-inline-start: 1px;`
`-scroll-ms-px`	`scroll-margin-inline-start: -1px;`
`scroll-ms-(<custom-property>)`	`scroll-margin-inline-start: var(<custom-property>);`
`scroll-ms-[<value>]`	`scroll-margin-inline-start: <value>;`
`scroll-me-<number>`	`scroll-margin-inline-end: calc(var(--spacing) * <number>);`
`-scroll-me-<number>`	`scroll-margin-inline-end: calc(var(--spacing) * -<number>);`
`scroll-me-px`	`scroll-margin-inline-end: 1px;`
`-scroll-me-px`	`scroll-margin-inline-end: -1px;`
`scroll-me-(<custom-property>)`	`scroll-margin-inline-end: var(<custom-property>);`
`scroll-me-[<value>]`	`scroll-margin-inline-end: <value>;`
`scroll-mbs-<number>`	`scroll-margin-block-start: calc(var(--spacing) * <number>);`
`-scroll-mbs-<number>`	`scroll-margin-block-start: calc(var(--spacing) * -<number>);`
`scroll-mbs-px`	`scroll-margin-block-start: 1px;`
`-scroll-mbs-px`	`scroll-margin-block-start: -1px;`
`scroll-mbs-(<custom-property>)`	`scroll-margin-block-start: var(<custom-property>);`
`scroll-mbs-[<value>]`	`scroll-margin-block-start: <value>;`
`scroll-mbe-<number>`	`scroll-margin-block-end: calc(var(--spacing) * <number>);`
`-scroll-mbe-<number>`	`scroll-margin-block-end: calc(var(--spacing) * -<number>);`
`scroll-mbe-px`	`scroll-margin-block-end: 1px;`
`-scroll-mbe-px`	`scroll-margin-block-end: -1px;`
`scroll-mbe-(<custom-property>)`	`scroll-margin-block-end: var(<custom-property>);`
`scroll-mbe-[<value>]`	`scroll-margin-block-end: <value>;`
`scroll-mt-<number>`	`scroll-margin-top: calc(var(--spacing) * <number>);`
`-scroll-mt-<number>`	`scroll-margin-top: calc(var(--spacing) * -<number>);`
`scroll-mt-px`	`scroll-margin-top: 1px;`
`-scroll-mt-px`	`scroll-margin-top: -1px;`
`scroll-mt-(<custom-property>)`	`scroll-margin-top: var(<custom-property>);`
`scroll-mt-[<value>]`	`scroll-margin-top: <value>;`
`scroll-mr-<number>`	`scroll-margin-right: calc(var(--spacing) * <number>);`
`-scroll-mr-<number>`	`scroll-margin-right: calc(var(--spacing) * -<number>);`
`scroll-mr-px`	`scroll-margin-right: 1px;`
`-scroll-mr-px`	`scroll-margin-right: -1px;`
`scroll-mr-(<custom-property>)`	`scroll-margin-right: var(<custom-property>);`
`scroll-mr-[<value>]`	`scroll-margin-right: <value>;`
`scroll-mb-<number>`	`scroll-margin-bottom: calc(var(--spacing) * <number>);`
`-scroll-mb-<number>`	`scroll-margin-bottom: calc(var(--spacing) * -<number>);`
`scroll-mb-px`	`scroll-margin-bottom: 1px;`
`-scroll-mb-px`	`scroll-margin-bottom: -1px;`
`scroll-mb-(<custom-property>)`	`scroll-margin-bottom: var(<custom-property>);`
`scroll-mb-[<value>]`	`scroll-margin-bottom: <value>;`
`scroll-ml-<number>`	`scroll-margin-left: calc(var(--spacing) * <number>);`
`-scroll-ml-<number>`	`scroll-margin-left: calc(var(--spacing) * -<number>);`
`scroll-ml-px`	`scroll-margin-left: 1px;`
`-scroll-ml-px`	`scroll-margin-left: -1px;`
`scroll-ml-(<custom-property>)`	`scroll-margin-left: var(<custom-property>);`
`scroll-ml-[<value>]`	`scroll-margin-left: <value>;`

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:

{

    <img
      className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
      src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
    />
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">

    <img
      className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
      src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
    />
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">

    <img
      className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
      src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
    />
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">

    <img
      className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
      src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
    />
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">

    <img
      className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
      src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
    />
  </div>
</div>

}

{/ prettier-ignore /}

<!-- [!code classes:scroll-ml-6] -->
<div class="snap-x ...">
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-01.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-02.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-03.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-04.jpg"/>
  </div>
  <div class="snap-start scroll-ml-6 ...">
    <img src="/img/vacation-05.jpg"/>
  </div>
</div>

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:

{ <>

Left-to-right

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
  </div>
  <p className="mt-4 mb-4 pl-6 text-sm font-medium">Right-to-left</p>
  <div className="flex w-full snap-x gap-12 overflow-x-auto pb-10" dir="rtl">
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">

      <img
        className="relative h-40 w-80 shrink-0 rounded-lg bg-white"
        src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
  </div>
</>

}

{/ prettier-ignore /}

<!-- [!code classes:scroll-ms-6] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      <img src="/img/vacation-01.jpg"/>
    </div>
    <!-- ... -->
  </div>
</div>

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>

scroll-margin

Examples#

Basic example#

Using negative values#

Using logical properties#

Using a custom value#

Responsive design#

Customizing your theme#