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.

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

CSS inset-inline-start Optimize Layouts for Global Design The CSS inset-inline-start property defines the logical inline start inset of an element. It adapts to writing modes, directions, and text orientations, making it ideal for global web design. Available options include length, percentage, and keyword values.

css_property_cover/css-property-scroll-padding-right.png

Enhance Scrolling with CSS scroll-padding-right Learn how to use CSS scroll-padding-right to control right-side padding in scroll containers. Explore keyword, length, and percentage values for better scrolling experiences.

css_property_cover/css-property-transform.png

Enhance Web Design with CSS Transform Property Learn how to use the CSS transform property to enhance your web designs. Discover options like rotate, scale, skew, and translate for dynamic effects.

css_property_cover/css-property-break-after.png

Understanding CSS Break-After for Better Layouts Learn about the CSS break-after property to manage content layouts across various media types. Discover available options and how to use them effectively.

css_property_cover/css-property-scroll-margin.png

Understanding CSS scroll-margin Enhance Scrolling Discover the CSS scroll-margin property. Learn how to control element visibility during scrolling and explore available options for better web design.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

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

150 Articles

Explore

Nodejs

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

60 Articles

Explore

Nextjs

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

40 Articles

Explore

Typescript

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

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

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

70 Articles

Explore

AstroJs

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

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms

CSS scroll-margin-bottom Enhance Scrolling Experience

Introduction

Specification

Description

Syntax

Values

Formal Definition

Formal Syntax

Example

Supported Browsers

See Also

Talk with CEO