CSS padding（填充）学习笔记

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	设置元素的顶部填充。