CSS scroll-margin-block-end

The scroll-margin-block-end property in CSS is used to set the margin at the bottom of the scroll container, outside of the scroll snap area. This can be useful for creating spacing between the content and the edge of the scroll container.

Let's see how we can use the scroll-margin-block-end property with some examples:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

In the example above, we have a div element with some text inside it. We have applied the scroll-margin-block-end: 20px; property to create a margin of 20px at the bottom of the scroll container.

Now, let's create a more complex example with an image inside the scroll container:

Result:
Example Image

In the second example, we have an img element inside the scroll container. We have set the scroll-margin-block-end: 30px; property to create a margin of 30px at the bottom of the scroll container, giving more space between the image and the edge of the container.

It's important to note that the scroll-margin-block-end property only applies to elements with overflow: auto; or overflow: scroll; set.