What is the difference between offsetHeight and scrollHeight of an element in DOM?

Question

In the DOM, what is the difference between an element’s offsetHeight and its scrollHeight? An image in explanation would be a great help.

Answer 1

As @Csarsam said, offset height is the border-box height (I'm rewording). Scroll height, is the height of the scrollable content, which is generally composed of multiple elements. But scroll height it also defined on elements which does not scroll, hence does not have a scrollable content, in which case (I’ve checked but I have no reference to back it up) scroll height is its content height, that is, it does not include the margins and borders. But when the element is part of a scrollable content, its margin are taken into account to compute the scroll height of its parent.

Scroll height is defined on both scrollable content and non‑scrollable content, that’s what may confuse.

Update

Here is a reference which confirms what I’ve checked: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight