在看任何跟邊界有關的 CSS 時都應該會看過這張圖，這張圖代表著 HTML 內的每個元素的邊界設定。

很多人在初學網頁的時候都會 margin 、 padding 傻傻分不清，兩者的作用都是負責調整邊界的間距，到底兩個差別在哪裡呢？以及 border 與 box-sizing 之間又有什麼關係呢？今天先講margin和padding

margin

margin 是負責調整 元素與元素 之間的邊界間距，屬於元素外部的邊界調整。

屬性介紹

• margin-top
  設定元素與元素之間的上邊界間距。
• margin-right
  設定元素與元素之間的右邊界間距。
• margin-bottom
  設定元素與元素之間的下邊界間距。
• margin-left
  設定元素與元素之間的左邊界間距。
  

也可將也可以將上述的屬性合併寫成 margin ，但要注意方向性， margin 寫法可以參考下面

• margin:上 下 左 右;
• margin:上下 左右;
• margin:上 左右 下;
• margin:四的邊相同值

padding

padding 是負責調整 元素內所有內容與元素自身 的邊界間距，屬於元素內部的邊界調整。

屬性介紹

• padding-top
  設定元素內容與元素自身上邊界的間距。
• padding-right
  設定元素內容與元素自身右邊界的間距。
• padding-bottom
  設定元素內容與元素自身下邊界的間距。
• padding-left
  設定元素內容與元素自身左邊界的間距。

也可將也可以將上述的屬性合併寫成 padding ，但一樣要注意方向性， padding 寫法可以參考下面

• padding:上 下 左 右;
• padding:上下 左右;
• padding:上 左右 下;
• padding:四的邊相同值