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

HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.

This page and this page are my sources.

The MDN documentation also provides images to demonstrate.