🔸.paddingBox

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

padding box

origin: (.clientTop, .clientLeft) - relative to .borderBox.
size: (.clientWidth, .clientHeight) = content (width, height) + padding.

🈯 synonyms： "client area".

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.

position: (.clientTop, .clientLeft) in .borderBox

for inline elements (like <i>, <code>, <span>), they all return 0.

size: (.clientWidth, .clientHeight)

for inline elements and elements with no CSS(❓), they all return zero.

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

position: (.clientTop, .clientLeft) in .borderBox

width of top/left border
for inline elements (like <i>, <code>, <span>), they all return 0.

size: (.clientWidth, .clientHeight)

doesn't include the width/height of scrollbars (if present).
for inline elements and elements with no CSS(❓), they all return zero.

Previousscrollbar width Next.borderBox

Last updated 2 years ago

Was this helpful?