CSS scroll-margin-block Property


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
Computed value
See individual properties
by computed value type
JavaScript syntax


scroll-margin-block: <length>{1,2} 


  • <length>An outset from the corresponding edge of the scroll container.


<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>
#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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 29th September 2023