CSS scroll-margin-block-start

The scroll-margin-block-start property specifies the block start margin of the scroll snap area. This property defines the block start margin to be applied to an element when determining the snap positions.

When using scroll-margin-block-start, the browser will add space to the block start side of the scroll container based on the value specified. This can be useful to ensure that certain elements, such as headings or navigation menus, are fully visible when scrolling to a snap position.

This property is typically used in conjunction with the scroll-snap-type and scroll-padding properties to create a smoother and more controlled scrolling experience.

Let's see an example to understand how scroll-margin-block-start works:

Result:

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

In this example, we have a scrollable container with boxes inside. The scroll-margin-block-start: 50px; property adds a block start margin of 50 pixels to the scroll snap area. This ensures that when scrolling to a snap position, the boxes have extra space at the top, making them fully visible.