CSS what does scroll-margin do

Question

TL; DR: What does CSS scroll-margin do?

I wanted to scroll to the bottom of my chat box. I used scrollIntoView with a dummy div, but it was 8px off because of my box's 8px of bottom padding. I read scrollIntoView with margin and I used scroll-margin and it worked like a charm, but now I am wondering why. The docs say that scroll-margin is for defining a scroll snap area, but when I used it, I didn't get anything like a snap area.

CSS snippets:

.chat-messages-container {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.chat-scroll-dummy {
  scroll-margin: 8px;
}

JS

dummyEle.scrollIntoView();

To clarify, I got the desired outcome, and now I am wondering why.