CSS padding（填充）和 CSS overflow （溢出）

CSS padding（填充）

CSS padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
padding（填充）
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性可以改變上下左右的填充。

屬性定義及使用說明

padding 簡寫屬性在一個聲明中設置所有填充屬性。該屬性可以有1到4個值。

實例:

• padding:10px 5px 15px 20px;
  • 上填充是 10px
  • 右填充是 5px
  • 下填充是 15px
  • 左填充是 20px
• padding:10px 5px 15px;
  • 上填充是 10px
  • 右填充和左填充是 5px
  • 下填充是 15px
• padding:10px 5px;
  • 上填充和下填充是 10px
  • 右填充和左填充是 5px
• padding:10px;
  • 所有四個填充都是 10px

注意： 負值是不允許的。

CSS overflow 屬性

overflow屬性指定如果內容溢出一個元素的框，會發生什么。

比如：overflow: auto;

visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。與visible正好相反
scroll	無論內容是否超越范圍，都將顯示滾動條。不超范圍的話，滾動條可見，但被禁用
auto	當內容超出范圍時，顯示滾動條，否則不顯示。
inherit	規定應該從父元素繼承 overflow 屬性的值。

“overflow：auto”和“overflow：scroll”之間的區別？

overflow: scroll將隱藏所有溢出的內容並使滾動條出現在相關元素上。如果內容沒有溢出，滾動條仍然可見，但被禁用。

overflow: auto 非常相似，但滾動條僅在內容溢出時出現。

overflow 水平及垂直方向內容溢出時的設置
overflow-x 水平方向內容溢出時的設置
overflow-y 垂直方向內容溢出時的設置

以上三個屬性設置的值為visible、scroll、hidden、auto