padding(內邊距)

padding 是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。

一個元素的內邊距區域指的是其內容與其邊框之間的空間

注意：內邊距控制的是元素內部空出的空間，相反，margin 操作元素外部空出的空間  

padding屬性構成

• padding-top：內容上邊距

• padding-bottom：內容下邊距
  

• padding-left：內容左邊距

• padding-right：內容右邊距

 單獨使用 padding 屬性可以改變上下左右的填充：

 語法

/* 應用於所有邊 */
padding: 1em;

/* 上邊下邊 | 左邊右邊 */
padding: 5% 10%;

/* 上邊 | 左邊右邊 | 下邊 */
padding: 1em 2em 2em;

/* 上邊 | 右邊 | 下邊 | 左邊 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;/* inherit：繼承父元素padding */
padding: initial;/* initial：設置padding屬性為它的默認值（IE 不支持） */
padding: unset;/* unset：不設置padding */

 

注意：取值不能為負數！

padding 屬性接受 1~4 個值：

• 當只指定一個值時，該值會統一應用到全部四個邊的內邊距上。
• 指定兩個值時，第一個值會應用於上邊和下邊的內邊距，第二個值應用於左邊和右邊。
• 指定三個值時，第一個值應用於上邊，第二個值應用於右邊和左邊，第三個則應用於下邊的內邊距。
• 指定四個值時，依次（順時針方向）作為上邊，右邊，下邊，和左邊的內邊距

padding: 5%;                /* 所有邊：5% 的內邊距 */

padding: 10px;              /* 所有邊：10px 的內邊距 */

padding: 10px 20px;         /* 上邊和下邊：10px 的內邊距 */
                            /* 左邊和右邊：20px 的內邊距 */

padding: 10px 3% 20px;      /* 上邊：   10px 的內邊距 */
                            /* 左邊和右邊：3% 的內邊距 */
                            /* 下邊：   20px 的內邊距 */

padding: 1em 3px 30px 5px;  /* 上邊：1em  的內邊距*/
                            /* 右邊：3px  的內邊距*/
                            /* 下邊：30px 的內邊距*/
                            /* 左邊：5px  的內邊距*/