DEV Community 👩‍💻👨‍💻

jmau111⭐
jmau111⭐

Posted on • Updated on • Originally published at blog.julien-maury.dev

A CSS property you might not know

Today I learned the existence of scroll-margin, which I've missed from the beginning.

Browser support is not ideal (especially ios and also old browsers) but decent.

Source: caniuse

If you have any anchor in your page, it's nice to set something like:

.myanchor {
    scroll-margin-top: 73px;
}
Enter fullscreen mode Exit fullscreen mode

This way, the top screen does not eat your anchor title ^^

Before:

Alt Text

After:

Alt Text

Top comments (4)

Collapse
 
baenencalin profile image
Calin Baenen

I like it, and I think I understand.....(???).
But, what exactly is the property? Is there any documentation, or any description for it I can read to get a better understanding of what EXACTLY it's doing, and why?

Thanks!
Cheers!

Collapse
 
jmau111 profile image
jmau111⭐ Author

sure, look at the link I give at the very top of the post scroll-margin

Collapse
 
vishal2369 profile image
Vishal2369

nice

Collapse
 
hedanielld profile image
Hubert Daniell

This is really useful!

What image format should you use in your next project? 🤔