This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.
Last Updated: 2024-04-19
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 ::before
offsetHeight - includes borders. Does not include pseudo elements like ::before
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: el.offsetParent.id
offsetLeft, offsetTop provide x/y coordinates relative to offSetParent
watch out for naming confusions: offsetParent and offsetTop etc. are about another element, whereas offsetHeight etc. are about the element in question.
if an element is display:none the offsetWidth and offsetHeight are 0