📐 CSS scroll-padding-inline & scroll-padding-block — Complete Tutorial

The logical properties scroll-padding-inline and scroll-padding-block define the “safe scroll area” inside a scroll container along the inline and block axes. They work exactly like scroll-padding-left/right/top/bottom, but adapt to writing-mode and direction automatically.

>>“Use logical scroll-padding when building international layouts or responsive UIs that support RTL or vertical writing.”

Note

✔ Works only on the scroll container
✔ Often used with scroll-snap-type and scroll-snap-align
✔ Does NOT change layout — only scroll snapping behavior

📦 1. Understanding Logical Directions

Logical PropertyMaps to (Left-to-Right)Maps to (Right-to-Left)
scroll-padding-inline-startleftright
scroll-padding-inline-endrightleft
scroll-padding-block-starttoptop (same)
scroll-padding-block-endbottombottom (same)

Logical scroll padding allows snapping to work correctly in RTL, LTR, and vertical writing.

📌 2. Syntax

scroll-padding-inline

scroll-padding-inline: <length> | <percentage>;

scroll-padding-block

scroll-padding-block: <length> | <percentage>;

🎨 3. Basic Examples

✨ A. Horizontal Slider Using scroll-padding-inline

Horizontal snap layout

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 20px; /* space on both inline edges */
}

.slide {
  scroll-snap-align: start;
}

Ensures the first and last slides do not stick to the edges.

✨ B. Vertical Sections Using scroll-padding-block

Vertical snap layout

.sections {
  overflow-y: auto;
  height: 100vh;
  scroll-snap-type: block mandatory;
  scroll-padding-block: 80px; /* extra room on top & bottom */
}

.section {
  scroll-snap-align: start;
}

Useful when you have sticky headers that would otherwise hide the section title.

🎨 4. Inline Start / End (Precise Control)

inline start / end

.carousel {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline-start: 40px;
  scroll-padding-inline-end: 10px;
}

Note

RTL languages will automatically flip these values. No manual left/right coding needed.

🎨 5. Block Start / End Example

block start/end

.page {
  scroll-snap-type: block mandatory;
  scroll-padding-block-start: 100px; /* room for sticky header */
  scroll-padding-block-end: 30px;
}

📌 6. Combining scroll-padding-inline + scroll-padding-block

Combined logical scroll padding

.container {
  scroll-snap-type: both mandatory;
  scroll-padding-inline: 20px;
  scroll-padding-block: 40px;
}

This creates a balanced “snap-safe zone” on all logical sides.

🧪 Real-World Use Cases

1️⃣ Multi-language Carousel (LTR + RTL)

RTL-ready carousel

.carousel {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 24px;
}

Behaves correctly in Arabic, Hebrew, Japanese, and English layouts.

2️⃣ Documentation Reader with Sticky Header

Docs layout

.doc-viewer {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: block mandatory;
  scroll-padding-block-start: 80px; /* header height */
}

3️⃣ Product Card Grid with 2D Snapping

2D snap grid

.grid-scroll {
  scroll-snap-type: both proximity;
  scroll-padding-inline: 16px;
  scroll-padding-block: 16px;
}

⚠️ Common Mistakes

  • ❌ Applying these properties on children instead of the scroll container
  • ❌ Forgetting to add scroll-snap-type to enable snapping
  • ❌ Expecting them to add layout padding (they don’t — scroll only!)
  • ❌ Using left/right/top/bottom in multilingual sites instead of logical properties

Note

scroll-padding-inline / block = padding for the scrolling viewport, not layout spacing.

🔥 Summary

scroll-padding-inline and scroll-padding-block offer powerful, writing-mode–aware control for scroll snapping interfaces. They ensure perfect spacing regardless of language direction or layout orientation.

>>“Use logical scroll-padding for a truly global, future-proof UI.”