CSS scroll-margin-block Property
Description
The scroll-margin-block
CSS property is used to control the space between the block-level elements and the scrollable container's edges when using scroll operations, such as scrollIntoView() or keyboard scrolling. It allows web developers to create a buffer zone around block-level elements, ensuring that they are not obscured by the container's edges when navigating through content. By defining this margin, designers can enhance user experience by ensuring that key content remains visible and easily accessible during scrolling interactions. This property is particularly useful in situations where precise control over scrolling behavior is required for improved readability and usability.
- Initial value
- See individual properties
- Applies to
- all elements
- Inherited
- no
- Computed value
- See individual properties
- Animatable
- by computed value type
- JavaScript syntax
- object.style.scrollMarginBlock
Interactive Demo
Syntax
scroll-margin-block: <length>{1,2}
Values
- <length>An outset from the corresponding edge of the scroll container.
Example
<div id="container">
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
#container {
width: 80%;
aspect-ratio: 3/1;
padding: 40px 0;
margin: auto;
border: solid black 2px;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.blue {
background-color: lightblue;
width: 95%;
aspect-ratio: 3/1;
}
.green {
background-color: lightgreen;
width: 80%;
aspect-ratio: 4/1;
}
.blue, .green {
margin: 2px;
scroll-snap-align: start none;
scroll-margin-block: 10px;
}
Browser Support
The following table will show you the current browser support for the CSS scroll-margin-block
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 69 | 68 | 56 | 15 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
69 | 68 | 48 | 15 | 10 | 69 |
Last updated by CSSPortal on: 3rd January 2024