CSS scroll-margin-block

The scroll-margin-block property in CSS is used to adjust the margin of an element when it is the target of a fragment identifier. This property is particularly useful when you have a fixed header or footer on your page and you want to make sure that the content is not hidden behind them when scrolling to a specific section.

The syntax for the scroll-margin-block property is:

selector {
    scroll-margin-block: value;
}

Where selector is the element you want to apply the property to, and value can be either a length (px, rem, em, etc) or a percentage.

In the example above, the scroll-margin-block: 20px; property ensures that there is a margin of 20 pixels between the top of the viewport and the element when it is the target of a fragment identifier.

It is important to note that the scroll-margin-block property only works in browsers that support it, so it is always a good idea to provide a fallback solution for older browsers.