🔸.borderBox

also called "offset area"

browser ⟩ DOM ⟩ type ⟩ Element ⟩ boxes ⟩ Element+boxes ⟩ .borderBox

origin: (.offsetTop, .offsetLeft) top-left corner of current element's outer border relative to the top-left corner of the inner border of .offsetParent.
size: (.offsetWidth, .offsetHeight) = content (width, height) + padding + border (+ scrollbars, if present)

🈯 synonyms： "offset area".

👉 compare：.boundingBox (a Rect relative to viewport)

the elements must be in the document to read offsetHeight and other properties, a hidden (display:none) or out of the document element has no size.

.paddingBox = content + padding
.borderBox = content + padding + border (+ scrollbars, if present)
.scrollBox = content + padding + overflow

(.clientTop, .clientLeft)

width of top/left border, not very useful.
for inline elements (like <i>, <code>, <span>), they all return 0. 👉 see: element .paddingBox for more info.

⭐️ Note: .offsetParent returns null in the following situations:

the element (or its parent) has display:none.
the element has position:fixed ( Firefox returns <body>).
the element is <html> or <body>.

Previous.paddingBox Next.offsetParent

Last updated 1 year ago