BaselineLab

scroll-margin en CSS

Explora cómo scroll-margin amplía el área usada para llevar un elemento a la vista sin ocupar espacio en el layout. Aplica un valor común o ajusta cada lado por separado.

Preguntar a la IA

scroll-margin en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Qué debes observar

Alinea la tarjeta 05 y cambia el valor. Su borde se separará del scrollport, aunque la cuadrícula mantendrá el mismo gap.

Área punteada: zona invisible que se alinea antes que la tarjeta

Ancla 1

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 2

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 3

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 4

Enfoca este destino para llevar su área ampliada a la vista.

Destino de prueba

Ancla 5

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 6

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 7

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 8

Enfoca este destino para llevar su área ampliada a la vista.

Ancla 9

Enfoca este destino para llevar su área ampliada a la vista.

HTML
<div class="scrollport" aria-label="Área interactiva de scroll-margin" tabindex="0">
  <article
    class="snap-target"
    style="--target-color: #a7df9b"
    tabindex="0"
  >
    <h2>Ancla 1</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #f6bd60"
    tabindex="0"
  >
    <h2>Ancla 2</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #c7a6ff"
    tabindex="0"
  >
    <h2>Ancla 3</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #8ecae6"
    tabindex="0"
  >
    <h2>Ancla 4</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #ffb38a"
    tabindex="0"
  >
    <h2>Ancla 5</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #72d6c9"
    tabindex="0"
  >
    <h2>Ancla 6</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #f7a6c4"
    tabindex="0"
  >
    <h2>Ancla 7</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #ffd166"
    tabindex="0"
  >
    <h2>Ancla 8</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="snap-target"
    style="--target-color: #90caf9"
    tabindex="0"
  >
    <h2>Ancla 9</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
</div>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<div class="grid grid-cols-[repeat(3,minmax(16rem,72%))] auto-rows-[72%] gap-20 inline-[min(100%,36rem)] block-96 m-0 p-16 overflow-auto overscroll-contain snap-both snap-mandatory" aria-label="Área interactiva de scroll-margin" tabindex="0">
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#a7df9b_72%,#172033)] bg-[#a7df9b]"
    tabindex="0"
  >
    <h2>Ancla 1</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#f6bd60_72%,#172033)] bg-[#f6bd60]"
    tabindex="0"
  >
    <h2>Ancla 2</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#c7a6ff_72%,#172033)] bg-[#c7a6ff]"
    tabindex="0"
  >
    <h2>Ancla 3</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#8ecae6_72%,#172033)] bg-[#8ecae6]"
    tabindex="0"
  >
    <h2>Ancla 4</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#ffb38a_72%,#172033)] bg-[#ffb38a]"
    tabindex="0"
  >
    <h2>Ancla 5</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#72d6c9_72%,#172033)] bg-[#72d6c9]"
    tabindex="0"
  >
    <h2>Ancla 6</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#f7a6c4_72%,#172033)] bg-[#f7a6c4]"
    tabindex="0"
  >
    <h2>Ancla 7</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#ffd166_72%,#172033)] bg-[#ffd166]"
    tabindex="0"
  >
    <h2>Ancla 8</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
  <article
    class="box-border grid content-end gap-2 p-5 border rounded-2xl text-[#172033] snap-start scroll-m-[16px] *:m-0 [&_h2]:text-[clamp(1.5rem,1rem_+_2vw,2.5rem)] focus-visible:outline-4 focus-visible:outline-[#172033] focus-visible:-outline-offset-8 border-[color-mix(in_oklch,#90caf9_72%,#172033)] bg-[#90caf9]"
    tabindex="0"
  >
    <h2>Ancla 9</h2>
    <p>Enfoca este destino para llevar su área ampliada a la vista.</p>
  </article>
</div>
CSS
.scrollport {
  display: grid;
  grid-template-columns: repeat(3, minmax(16rem, 72%));
  grid-auto-rows: 72%;
  gap: 5rem;
  inline-size: min(100%, 36rem);
  block-size: 24rem;
  margin: 0;
  padding: 4rem;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: both mandatory;
}

.snap-target {
  box-sizing: border-box;
  display: grid;
  align-content: end;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in oklch, var(--target-color) 72%, #172033);
  border-radius: 1rem;
  background: var(--target-color);
  color: #172033;
  scroll-snap-align: start;
  scroll-margin: 16px;
}

.snap-target > * {
  margin: 0;
}

.snap-target h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.snap-target:focus-visible {
  outline: 4px solid #172033;
  outline-offset: -8px;
}