CSS scroll-padding-inline Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page layout */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 24px; }

.example { max-width: 900px; margin: 0 auto; }

.scroll-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 0;

  /* Enable horizontal scroll snapping */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Add inline padding so snapped items don't sit flush against the container edges */
  scroll-padding-inline: 3rem; /* equivalent to scroll-padding-left/right */

  -webkit-overflow-scrolling: touch;
}

.card {
  min-width: 260px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: linear-gradient(180deg, #ffffff, #f3f6ff);
  border: 1px solid rgba(20, 40, 80, 0.08);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(22, 46, 84, 0.06);
  font-size: 18px;
}

.note { color: #556; margin-top: 12px; font-size: 14px; }</style></head><body><div class="example">
  <h2>Scroll-padding-inline demo</h2>
  <div class="scroll-container" tabindex="0">
    <section class="card">Item 1</section>
    <section class="card">Item 2</section>
    <section class="card">Item 3</section>
    <section class="card">Item 4</section>
    <section class="card">Item 5</section>
  </div>
  <p class="note">Use keyboard or trackpad to scroll. Items snap with inline padding.</p>
</div></body></html>