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