# .paddingBox

[browser](../../../..) ⟩ [DOM](../../..) ⟩ [type](../..) ⟩ [Element](..) ⟩ [boxes](../boxes) ⟩ [Element+boxes]() ⟩ .paddingBox

{% hint style="success" %}
<mark style="color:purple;">**padding box**</mark>&#x20;

* <mark style="color:yellow;">**origin**</mark>: ([.clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [.clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)) - relative to [border](border "mention").
* <mark style="color:yellow;">**size**</mark>: ([.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), [.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)) = content (width, height) + <mark style="color:yellow;">**padding**</mark>.

:u6307: <mark style="color:yellow;">**synonyms**</mark>： "<mark style="color:purple;">**client area**</mark>".
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖解" %}
:floppy\_disk: [](<> "mention"), 👉 [coordinates](../../../../concepts/coordinates "mention")

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FBw1k2nc4T0FmFOoi8HYq%2Fpadding.box.svg?alt=media&#x26;token=448169f0-d7eb-4d11-ad61-432cd8f0c542" alt="elem.paddingBox" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
the elements <mark style="color:red;">**must**</mark>**&#x20;**<mark style="color:yellow;">**be in the document**</mark> to read [offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) and **other properties**, a <mark style="color:orange;">**hidden**</mark> (<mark style="color:blue;">`display:none`</mark>) or <mark style="color:red;">**out of the document**</mark> element has <mark style="color:red;">**no size**</mark>.
{% endhint %}

{% hint style="danger" %}
<mark style="color:yellow;">**position**</mark>: ([.clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [.clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)) in [border](border "mention")

* for <mark style="color:red;">**inline elements**</mark> (like <mark style="color:blue;">\<i></mark>, <mark style="color:blue;">\<code></mark>, <mark style="color:blue;">\<span></mark>), they all return <mark style="color:yellow;">**`0`**</mark>.
{% endhint %}

{% hint style="danger" %}
<mark style="color:yellow;">**size**</mark>: ([.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), [.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight))&#x20;

* for <mark style="color:red;">**inline elements**</mark> and elements <mark style="color:orange;">**with no CSS**</mark>(:question:), they all return <mark style="color:yellow;">**zero**</mark>.
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
* [padding](padding "mention") = <mark style="color:yellow;">**content**</mark> + <mark style="color:orange;">**padding**</mark>
* [border](border "mention") = <mark style="color:yellow;">**content**</mark> + <mark style="color:orange;">**padding**</mark> + <mark style="color:blue;">**border**</mark> (+ <mark style="color:red;">**scrollbars**</mark>, if present)
* [scroll](scroll "mention") = <mark style="color:yellow;">**content**</mark> + <mark style="color:orange;">**padding**</mark> + <mark style="background-color:red;">**overflow**</mark>
{% endhint %}

{% hint style="danger" %}
position: ([.clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [.clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)) in [border](border "mention")

* <mark style="color:yellow;">**width**</mark> of <mark style="color:yellow;">**top/left border**</mark>
* for <mark style="color:red;">**inline elements**</mark> (like <mark style="color:blue;">\<i></mark>, <mark style="color:blue;">\<code></mark>, <mark style="color:blue;">\<span></mark>), they all return <mark style="color:yellow;">**`0`**</mark>.
{% endhint %}

{% hint style="danger" %}
size: ([.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), [.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight))&#x20;

* <mark style="color:red;">**doesn't include**</mark> the **width**/**height** of <mark style="color:yellow;">**scrollbars**</mark> (if present).
* for <mark style="color:red;">**inline elements**</mark> and elements <mark style="color:orange;">**with no CSS**</mark>(:question:), they all return <mark style="color:yellow;">**zero**</mark>.
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [border](border "mention") / [viewport](../../window/viewport "mention") / [bounding](bounding "mention") / [scroll](scroll "mention")
* document [size](../../document/size "mention").
{% endtab %}

{% tab title="📗 參考" %}
* JS.info ⟩&#x20;
  * [ ] [Coordinates](https://tr.javascript.info/coordinates)
  * [ ] [Window sizes and scrolling](https://javascript.info/size-and-scroll-window)
  * [ ] [Element size and scrolling](https://javascript.info/size-and-scroll)
{% endtab %}

{% tab title="📘 手冊" %}
* [..](.. "mention") ⟩ [.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), [.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight), [.clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [.clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
* [htmlelement](../../htmlelement "mention") ⟩ [.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth), [.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
{% endtab %}
{% endtabs %}
