Last Updated: 2021-05-16
There are various measures of height given when inspecting elements in ChromeTools or interacting with JS.
clientHeight - represents visible content & padding (but excludes border and margin). It DOES include pseudo elements like
offsetHeight - includes borders. Does not include pseudo elements like
scrollHeight - ENTIRE content. Minimum height element would require to fit all content in viewport WITHOUT using scrollbar (entire content, including invisible content + padding)
clientHeight will be less than or equal to the
scrollheight since it is restricted to visual content.
clientHeight will be the same as
scrollHeight if the element's content can fit without the need for a vertical scrollbar.
offsetParent- nearest ancestor (3 possibilities - either nearest CSS-positioned, nearest td/table, or nearest body element).
If unsure what element is the ancestor, JS will tell you with:
offsetTop provide x/y coordinates relative to
watch out for naming confusions:
offsetTop etc. are about another element, whereas
offsetHeight etc. are about the element in question.
if an element is
offsetHeight are 0