## 前言
今天主要講的會分成兩個部分，分別是
1. offset系列
2. client系列

然後這兩種都會個別擁有`Left`、`Top`、`Width`和`Height`。

但今天如果我想獲得元素本身的寬度時，知道是要`Width`，但是要用offset系列還是client系列是會讓人感到困惑的。

會遇到的問題像是說：
offsetLeft跟clientLeft差在哪裡？
offsetTop跟clientTop差在哪裡？

以下直接列出我整理後的重點。

## Width / Height
- offsetWidth / offsetHeight 是「元素本身」的寬度/高度 (包括border)

- clientWidth / clientHeight 是「元素本身」的寬度/高度 (不包括border)

可以發現其實這兩者只差在有沒有包括`border`。

## Left / Top
- offsetLeft / offsetTop 是元素本身相對於母元素的水平/垂直距離。

- clientLeft / clientTop 是元素本身內外的水平/垂直距離(可以理解成border)。

client系列的是只有`border`的距離。

我有做一張圖方便理解：

## 補充
scroll系列，可以看這篇～
https://shubo.io/element-size-scrolling/#offsetleft-offsettop