🔸.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".

🗺️ 圖解

💾 Element+boxes, 👉 coordinates

elem.paddingBox

🧨 雷區

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.

👥 相關

• .borderBox / viewport / .boundingBox / .scrollBox

• document document size.

📗 參考

• JS.info ⟩

  • Coordinates

  • Window sizes and scrolling

  • Element size and scrolling

📘 手冊

• Element ⟩ .clientWidth, .clientHeight, .clientTop, .clientLeft

• HTMLElement ⟩ .offsetWidth, .offsetHeight