CSS scroll-margin-top Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-margin-top property in CSS is used to set the top margin of an element that is snapped to a scroll container.

This property is particularly useful when working with CSS scroll snapping, as it allows you to adjust the scroll position to avoid overlapping fixed headers or other elements.

💡 Syntax

The syntax for the scroll-margin-top property is simple. It can be applied to any element and accepts a length value that specifies the top margin.

Syntax

Copied

element {
  scroll-margin-top: length;
}

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

🎛️ Default Value

The default value of the scroll-margin-top property is 0, meaning no additional margin is added by default.

🏠 Property Values

Value	Description
length	Specifies the top margin as a CSS length unit (e.g., 10px, 2em, 5rem, 10%, etc.).

📄 Example

In this example, we'll set a top scroll margin of 20px for a section element. This is useful when you want to avoid overlapping content, like a fixed header.

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-top Example</title>
  <style>
    body {
      height: 200vh; /* Increase body height to enable scrolling */
      scroll-snap-type: y mandatory;
    }

    section {
      height: 100vh;
      scroll-snap-align: start;
      scroll-margin-top: 20px; /* Add top margin for scroll snapping */
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <header>Fixed Header</header>
  <section style="background-color: lightcoral;">Section 1</section>
  <section style="background-color: lightblue;">Section 2</section>
  <section style="background-color: lightgreen;">Section 3</section>
</body>
</html>

🖥️ Browser Compatibility

The scroll-margin-top 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-top property is a valuable tool for web developers aiming to create smooth and user-friendly scrolling experiences.

By adjusting the top margin of elements during scroll snapping, you can prevent overlapping content and ensure that important elements remain visible. Experiment with different values to see how this property can improve the usability of your web projects.