CSS scroll-margin-top

The scroll-margin-top property in CSS is used to set the top margin of an element when it is used as the target of a fragment identifier (such as a link with an anchor). This property helps create a smooth scroll behavior by adjusting the position of the scroll target.

Let's dive into an example to see how the scroll-margin-top property works:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet turpis quis est congue vehicula nec sit amet odio. Cras fermentum aliquam ultricies. Vivamus tincidunt neque ac pellentesque convallis. Nullam felis nunc, ultricies auctor tincidunt a, hendrerit eget ante. Nulla facilisi. Integer sit amet ante ac odio pellentesque congue ac vel tortor. Donec sit amet condimentum erat.

In the example above, we have a div element with a scroll-margin-top property set to 50px. This creates a top margin of 50px when the element is used as a scroll target.

Feel free to experiment with different values for the scroll-margin-top property to see how it affects the scroll behavior of the element.