Tillitsdone

EN

TH

rick@tillitsdone.com

+66824564755

Scroll to discover

CSS scroll-margin-bottom Enhance Scrolling Experience

Learn about CSS scroll-margin-bottom, a property that enhances scrolling experiences by defining the bottom margin of the scroll snap area.

Discover available options and how to use them effectively.

thumbnail

Introduction

The scroll-margin-bottom property in CSS is a handy tool for web developers and designers. It allows you to control the scroll snap area of an element precisely. This property defines the bottom margin of the scroll snap area, helping elements align perfectly within the scroll container. It’s been widely supported across browsers since July 2019, so you can use it confidently.

Specification

The scroll-margin-bottom property is defined in the CSS Scroll Snap Module Level 1 specification. This module helps control scroll snap points, making it easier to create smooth and precise scrolling experiences.

Description

The scroll-margin-bottom property in CSS sets the bottom margin of the scroll snap area for an element. This margin determines how much space should be added to the bottom edge of the element when it is snapped into position within the scroll container. By adjusting this property, you can ensure that elements snap into place perfectly, enhancing the visual appeal and user interaction of your web pages.

Syntax

The syntax for using the scroll-margin-bottom property is straightforward:

/* <length> values */
scroll-margin-bottom: 10px;
scroll-margin-bottom: 1em;

/* Global values */
scroll-margin-bottom: inherit;
scroll-margin-bottom: initial;
scroll-margin-bottom: revert;
scroll-margin-bottom: revert-layer;
scroll-margin-bottom: unset;

Values

The scroll-margin-bottom property accepts the following values:

<length>: Specifies the outset from the bottom edge of the scroll container. You can use various length units like px, em, rem, and vh.
Global Values: Include standard CSS values like inherit, initial, revert, revert-layer, and unset.

Note that scroll-margin-bottom does not accept percentage values.

Formal Definition

Initial value	`0`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	by computed value type

Formal Syntax

scroll-margin-bottom = <length>

Example

Here’s a practical example to illustrate how the scroll-margin-bottom property works:

<!DOCTYPE html>
<html>
<head>
<style>
.scroller {
  width: 300px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.scroller > div {
  width: 300px;
  height: 300px;
  font-size: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end none;
}
.scroller div:nth-child(odd) {
  background-color: green;
  scroll-margin-bottom: 1rem;
}
.scroller div:nth-child(even) {
  background-color: rgb(160, 231, 45);
  scroll-margin-bottom: 3rem;
}
</style>
</head>
<body>
<div class="scroller">
  <div>Geeks</div>
  <div>for</div>
  <div>Geeks</div>
  <div>for</div>
  <div>Geeks</div>
</div>
</body>
</html>

Supported Browsers

The scroll-margin-bottom property is supported in the following browsers:

Google Chrome 69
Edge 79
Firefox 68
Opera 56
Safari 14.1

See Also

For more information on CSS scroll snap and related properties, you can refer to:

[CSS scroll snap]WebsiteUrl
[Well-controlled scrolling with CSS scroll snap]WebsiteUrl
[scroll-margin-top]WebsiteUrl
[scroll-margin-left]WebsiteUrl
[scroll-margin-right]WebsiteUrl

By understanding and utilizing scroll-margin-bottom, you can create more engaging and user-friendly web experiences. Happy coding!

Latest Blogs

Discover our top articles, selected to support the growth of your business.

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F10%2FTill-its-done_SEO_R43_Sep_1440x697.jpg@webp

สร้างเว็บไซต์ 1 เว็บ ต้องใช้งบเท่าไหร่? เจาะลึกทุกองค์ประกอบ website development cost อยากสร้างเว็บไซต์แต่ไม่มั่นใจในเรื่องของงบประมาณ อ่านสรุปเจาะลึกตั้งแต่ดีไซน์, ฟังก์ชัน และการดูแล พร้อมตัวอย่างงบจริงจาก Till it’s done ที่แผนชัด งบไม่บานปลายแน่นอน

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F10%2FTill-its-done_SEO_R42_Sep_1440x697.jpg@webp

Next.js สอน 14 ขั้นตอนเบื้องต้น: สร้างโปรเจกต์แรกใน 30 นาที เริ่มต้นกับ Next.js ใน 14 ขั้นตอนเพียงแค่ 30 นาที พร้อม SSR/SSG และ API Routes ด้วยตัวอย่างโค้ดง่าย ๆ อ่านต่อเพื่อสร้างโปรเจ็กต์แรกได้ทันทีที่นี่

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F10%2FTill-its-done_SEO_R41_Sep_1440x697.jpg@webp

วิธีสมัคร Apple Developer Account เพื่อนำแอปขึ้น App Store ทีละขั้นตอน อยากปล่อยแอปบน App Store ระดับโลก มาอ่านคู่มือสมัคร Apple Developer Account พร้อมเคล็ดลับ TestFlight และวิธีอัปโหลดที่ง่ายในบทความเดียวนี้ได้เลย

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F10%2FTill-its-done_SEO_R38_Sep_1440x697.jpg@webp

TypeScript Interface คืออะไร? อธิบายพร้อมวิธีใช้และข้อแตกต่างจาก Type เรียนรู้วิธีใช้ TypeScript Interface เพื่อสร้างโครงสร้างข้อมูลที่ปลอดภัยและเข้าใจง่าย พร้อมเปรียบเทียบข้อดีข้อแตกต่างกับ Type ที่คุณต้องรู้ ถูกรวมเอาไว้ในบทความนี้แล้ว

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R36_Sep_1440x697.jpg@webp

Material-UI (MUI) คืออะไร อยากสร้าง UI สวยงามและเป็นมืออาชีพในเวลาอันรวดเร็วใช่ไหม มาทำความรู้จักกับ Material-UI (MUI) ที่ช่วยให้คุณพัฒนาแอปพลิเคชันบน React ได้ง่ายและดูดีในทุกอุปกรณ์

https://imgproxy-landing-page.tillitsdone.com/sig/rs:fit:1200:630/plain/https%3A%2F%2Fcms-r2.tillitsdone.com%2Fwp-content-prod%2Fuploads%2F2025%2F09%2FTill-its-done_SEO_R27_Sep_1440x697.jpg@webp

เปรียบเทียบ 3 วิธีติดตั้ง install node js บน Ubuntu: NVM vs NodeSource vs Official Repo แบบไหนดีที่สุด? เรียนรู้วิธีติดตั้ง Node.js บน Ubuntu ด้วย NVM, NodeSource หรือ Official Repo เลือกวิธีที่เหมาะกับความต้องการของคุณ พร้อมเปรียบเทียบ เพื่อการพัฒนาที่มีประสิทธิภาพ!

View all 1242 blogs

พูดคุยกับซีอีโอ

พร้อมที่จะสร้างเว็บ/แอปของคุณให้มีชีวิตชีวาหรือเสริมทีมของคุณด้วยนักพัฒนาชาวไทยผู้เชี่ยวชาญหรือไม่?

ติดต่อเราวันนี้เพื่อหารือเกี่ยวกับความต้องการของคุณ แล้วมาสร้างโซลูชันที่ปรับแต่งเพื่อบรรลุเป้าหมายของคุณกัน เรายินดีช่วยเหลือทุกขั้นตอน!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

Popular JavaScript library for building user interfaces with a component-based architecture.

icons/flutter.svg

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

JavaScript runtime for building scalable, high-performance server-side applications.

icons/next-js.svg

React framework enabling server-side rendering and static site generation for optimized performance.

icons/tailwind.svg

Utility-first CSS framework for rapid UI development.

icons/code-outline.svg

Superset of JavaScript adding static types for improved code quality and maintainability.

icons/code-outline.svg

Programming language known for its simplicity, concurrency model, and performance.

icons/code-outline.svg

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

icons/code-outline.svg

Versatile testing framework for JavaScript applications supporting various test types.

icons/code-outline.svg

Website development th

icons/code-outline.svg

Mobile application th

icons/code-outline.svg

icons/code-outline.svg

icons/code-outline.svg

icons/code-outline.svg

Software house th

icons/code-outline.svg

icons/code-outline.svg

icons/css-4.svg

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

FacebookInstagramLinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

Premier agency directory, awards platform, and media hub connecting brands with top agencies in software, app development

DesignRush
web design companies

Trusted B2B listing, rating, and review platform where you can explore and compare the top-ranked companies worldwide