CSS scroll-margin-block-end Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-margin-block-end property in CSS is used to set the margin at the end of the scroll container along the block axis, which is typically vertical in most writing modes.

This property is useful for creating space between the end of an element and the scroll container when it is scrolled into view, ensuring that the element is not too close to the edge of the viewport.

💡 Syntax

The syntax for the scroll-margin-block-end property is simple and can be applied to any element.

Syntax

Copied

element {
  scroll-margin-block-end: value;
}

Here, value can be a length value (e.g., 10px, 2em) or a percentage.

🎛️ Default Value

The default value of the scroll-margin-block-end property is 0. This means that no additional margin is added by default when the element is scrolled into view.

🏠 Property Values

Value	Description
length	Specifies a fixed amount of margin at the end of the scroll container. For example, 20px, 1rem, etc.
percentage	Specifies a percentage of the height of the element’s containing block.

📄 Example

In this example, we'll set a scroll margin at the end of an element to create some space when it is scrolled into view.

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-block-end Example</title>
  <style>
    .container {
      height: 200px;
      overflow-y: scroll;
      border: 1px solid #000;
    }
    .content {
      height: 400px;
      background: linear-gradient(to bottom, #ffcccb, #add8e6);
    }
    .target {
      scroll-margin-block-end: 50px;
      background-color: yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Scroll Margin Block End Example</h1>
  <div class="container">
    <div class="content">
      <div class="target">Scroll to me!</div>
    </div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-margin-block-end 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-block-end property is a useful tool for managing the spacing of elements when they are scrolled into view.

By customizing this property, you can ensure that your elements have appropriate margins, improving the overall user experience. Experiment with different values to see how this property can enhance the look and functionality of your web projects.