CSS scroll-margin-inline Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scroll-margin-inline property in CSS is used to define the margin on the inline start and inline end edges of an element that is used to snap it to a scroll container.

This property is particularly useful when working with horizontal scroll snapping, allowing you to adjust the scroll offset for elements along the inline axis, which varies based on the writing mode of the document.

💡 Syntax

The syntax for the scroll-margin-inline property is straightforward. You can specify a single value or two values for the inline start and inline end margins.

Syntax

Copied

element {
  scroll-margin-inline: value;
}

element {
  scroll-margin-inline: inline-start-value inline-end-value;
}

🎛️ Default Value

The default value of the scroll-margin-inline property is 0, which means there is no additional margin applied for scroll snapping.

🏠 Property Values

Value	Description
value	A length or percentage that defines the margin. If one value is given, it applies to both the inline start and inline end margins. If two values are given, the first value applies to the inline start margin and the second value applies to the inline end margin.

📄 Example

In this example, we'll apply a scroll margin to an element to ensure it snaps with some margin from the container's edges.

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-inline Example</title>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
    }
    .item {
      flex: 0 0 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue;
      scroll-snap-align: center;
      scroll-margin-inline: 20px;
    }
  </style>
</head>
<body>
  <h1>Scroll Margin Inline Example</h1>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scroll-margin-inline 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-inline property is a useful tool for adjusting the scroll snapping behavior of elements within a scroll container.

By customizing the margin on the inline axis, you can create a more refined and visually appealing scrolling experience. Experiment with different values to see how this property can improve the layout and usability of your web projects.