CSS 中的 padding（填充）是一個非常重要的屬性，它用于定義元素邊框與元素內容之間的空間，即上下左右的內邊距。合理使用 padding 可以讓頁面布局更加美觀、清晰。以下是對 CSS padding 的詳細學習筆記。

一、padding?的作用

padding 屬性用于設置元素的內邊距，即元素內容與邊框之間的空間。當元素的 padding 被清除時，所釋放的區域將會被元素的背景顏色填充。通過設置 padding，可以調整元素內容與邊框之間的距離，從而改善頁面布局的視覺效果。

二、padding?的取值

padding 屬性可以接受以下幾種取值：

表格

復制

值	說明
length	定義一個固定的填充，可以使用像素（px）、點（pt）、em 等單位。例如：padding: 10px;
%	使用百分比值定義一個填充，百分比是相對于元素寬度的。例如：padding: 5%;

三、padding?的單邊屬性

在 CSS 中，可以單獨設置元素的上、右、下、左四個方向的內邊距。這些單邊屬性分別是：

• padding-top：設置元素的上內邊距。

• padding-right：設置元素的右內邊距。

• padding-bottom：設置元素的下內邊距。

• padding-left：設置元素的左內邊距。

示例

css

復制

/* 單邊內邊距設置 */
div {padding-top: 25px;padding-right: 50px;padding-bottom: 25px;padding-left: 50px;
}

在上述代碼中，div 元素的上內邊距為 25px，右內邊距為 50px，下內邊距為 25px，左內邊距為 50px。

四、padding?的簡寫屬性

為了簡化代碼，CSS 提供了 padding 簡寫屬性，可以在一個聲明中同時設置上下左右四個方向的內邊距。padding 簡寫屬性可以接受一到四個值，具體規則如下：

1. 四個值

css

復制

padding: 25px 50px 75px 100px;

• 上填充為 25px

• 右填充為 50px

• 下填充為 75px

• 左填充為 100px

2. 三個值

css

復制

padding: 25px 50px 75px;

• 上填充為 25px

• 左右填充為 50px

• 下填充為 75px

3. 兩個值

css

復制

padding: 25px 50px;

• 上下填充為 25px

• 左右填充為 50px

4. 一個值

css

復制

padding: 25px;

• 所有的填充都是 25px

五、更多實例

1. 設置所有填充屬性

css

復制

/* 使用簡寫屬性設置所有填充 */
div {padding: 20px 30px 40px 50px;
}

2. 設置左填充

css

復制

/* 設置左填充 */
div {padding-left: 20px;
}

3. 設置右填充

css

復制

/* 設置右填充 */
div {padding-right: 20px;
}

4. 設置上填充

css

復制

/* 設置上填充 */
div {padding-top: 20px;
}

5. 設置下填充

css

復制

/* 設置下填充 */
div {padding-bottom: 20px;
}

六、所有 CSS 填充屬性

以下是 CSS 中與 padding 相關的所有屬性及其說明：

表格

復制

屬性	說明
padding	使用簡寫屬性設置在一個聲明中的所有填充屬性。
padding-bottom	設置元素的底部填充。
padding-left	設置元素的左部填充。
padding-right	設置元素的右部填充。
padding-top	設置元素的頂部填充。