CSS scroll-margin-bottom Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-margin-bottom property in CSS is used to set the bottom margin of an element that snaps into a scroll container.

This property is part of the CSS Scroll Snap Module, which allows web developers to control the snap position of elements when the user scrolls. By using scroll-margin-bottom, you can adjust the position of an element to be a certain distance away from the container's bottom edge when it snaps into place.

💡 Syntax

The syntax for the scroll-margin-bottom property is straightforward and allows you to specify a length value.

Syntax

Copied

element {
  scroll-margin-bottom: value;
}

Here, value can be any valid CSS length unit such as px, em, rem, %, etc.

🎛️ Default Value

The default value of the scroll-margin-bottom property is 0, meaning there is no additional margin applied by default.

🏠 Property Values

Value	Description
length	Specifies the bottom margin of the scroll snap area. It can be any valid CSS length unit, such as px, em, rem, %, etc.

📄 Example

In this example, we'll set a bottom margin for an element within a scroll container to ensure it snaps into place 50px away from the bottom edge.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS scroll-margin-bottom Example</title>
  <style>
    .scroll-container {
      width: 300px;
      height: 200px;
      overflow: auto;
      scroll-snap-type: y mandatory;
    }

    .scroll-item {
      scroll-snap-align: start;
      scroll-margin-bottom: 50px;
      height: 150px;
      margin-bottom: 20px;
      background-color: lightblue;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <h1>Scroll Margin Bottom Example</h1>
  <div class="scroll-container">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-margin-bottom property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The scroll-margin-bottom property is a useful tool for web developers looking to enhance the user experience by controlling the scroll position of elements.

By customizing the bottom margin for scroll snapping, you can ensure that elements are positioned exactly where you want them when they snap into place. Experiment with different values to see how this property can improve the usability and aesthetics of your web projects.