在 CSS 中，内边距（padding）常常又被称为 “补白”，它指的是内容区到边框之间的那一部分。需要清楚的是，内边距是在边框内部的。
CSS 内边距的局部样式
从 CSS 盒子模型可以看出，内边距分为 4 个方向：padding-top、padding-right、padding-bottom、padding-left。
语法：
padding-top: 数值;
padding-right: 数值;
padding-bottom: 数值;
padding-left: 数值;示例 1：padding 的局部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
/* 将块元素转换为 inline-block 元素，使元素宽度由内容决定，便于观察内边距效果 */
display: inline-block;
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
border: 2px solid red;
background-color: skyblue;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
CSS 内边距的简写形式
与 border 属性一样，内边距 padding 属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding 写法有 4 种，如下所示。
语法：
padding: 数值;
padding: 数值1 数值2;
padding: 数值1 数值2 数值3;
padding: 数值1 数值2 数值3 数值4;说明：
padding: 50px;上面代码表示，4 个方向的内边距都是 50px。
padding: 50px 100px;上面代码表示，padding-top 和 padding-bottom 为 50px，padding-right 和 padding-left 为 100px。
padding: 50px 100px 150px;上面代码表示，padding-top 为 50px，padding-right 和 padding-left 为 100px，padding-bottom 为 150px。
padding: 50px 100px 150px 200px;上面代码表示，padding-top 为 50px，padding-right 为 100px，padding-bottom 为 150px，padding-left 为 200px。
对于 padding 值的顺序，小伙伴们按顺时针记忆就可以了，如下图所示。
注意:
- padding 会增加元素的整体大小。元素的总宽度和总高度在计算时，需要加上内边距的值。
- inline 元素（如 span、strong 等）设置 padding 和 height 是无效的，需要使用 display 属性将其转换为 block 或 inline-block 才会生效。
示例 2：padding 的简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
display: inline-block; /* 将块元素转换为 inline-block 元素 */
padding: 50px 100px;
border: 2px solid red;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
padding: 50px 100px;上面代码等价于：
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 100px;padding 的派生子属性
padding 是一个复合属性，它有 4 个派生子属性（如下表所示），用于单独设置某个方向的 padding。
| 子属性 | 说明 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
