CSS scroll-margin-inline-start

The scroll-margin-inline-start property in CSS is used to specify a margin for the start of an element's scroll snap area. This property is useful for controlling how far away from the start of an element's scroll snap area a scroll snap point should be. It can help improve the readability and usability of scrollable elements on a webpage.

The scroll-margin-inline-start property can be specified in pixels, percentages, or other length units. By default, the value is 0, meaning there is no margin for the start of the scroll snap area.

Let's look at an example to see how the scroll-margin-inline-start property works:

In this example, we have a parent <div> element with a specified width and height, and an overflow: auto style to make it scrollable. Inside the parent element, we have two child <div> elements with specified widths and heights. The first child element has a scroll-margin-inline-start: 50px; style applied to it, which creates a margin of 50 pixels at the start of its scroll snap area.

As a result, when you scroll through the parent element, the scroll snap aligns to the start of the first child element with the scroll snap area starting 50 pixels from the left edge of the parent element.