在CSS的盒模型体系里，padding指的是元素的内边距，也就是元素的内容区域和元素的边框之间的空白空间。它属于元素自身的一部分，设置padding后，元素的总宽度和高度会相应增加，除非手动调整盒模型的计算方式。
padding的基本取值规则
padding可以接受长度值、百分比作为取值，不能使用负数。长度值常用的有px、rem、em等单位，百分比则是相对于元素包含块的宽度来计算。
padding有四种单独的设置方向，分别是上、右、下、左，对应属性为padding-top、padding-right、padding-bottom、padding-left。同时也可以用简写属性padding一次性设置多个方向的值，规则如下：
- 如果只写1个值，比如
padding: 10px，代表四个方向的内边距都是10px - 如果写2个值，比如
padding: 10px 20px，第一个值代表上下内边距10px，第二个值代表左右内边距20px - 如果写3个值，比如
padding: 10px 20px 30px，分别代表上内边距10px、左右内边距20px、下内边距30px - 如果写4个值，比如
padding: 10px 20px 30px 40px，按照上、右、下、左的顺序依次设置四个方向的内边距
padding的实际使用示例
下面通过一个简单的div元素来演示padding的效果，首先是不设置padding的基础样式：
/* 基础样式，无padding */
.base-box {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
}
对应的HTML结构如下：
<div class="base-box">这是基础盒子内容</div>
此时内容会紧贴边框，排版比较拥挤。接下来给这个盒子添加padding设置：
/* 添加padding后的样式 */
.padding-box {
width: 200px;
height: 100px;
border: 2px solid #333;
background-color: #f0f0f0;
/* 上下内边距15px，左右内边距20px */
padding: 15px 20px;
}
对应的HTML结构调整为：
<div class="padding-box">这是添加padding后的盒子内容</div>
此时可以看到内容和边框之间出现了空白区域，内容不会紧贴边框，视觉上更舒适。需要注意的是，默认情况下这个盒子的总宽度会变成200px + 20px*2 + 2px*2 = 244px，总高度会变成100px +15px*2 +2px*2 = 132px，因为padding会增加元素的总尺寸。
padding和margin的区别
很多初学者会混淆padding和margin，两者的核心区别如下：
| 对比项 | padding（内边距） | margin（外边距） |
|---|---|---|
| 作用区域 | 元素内容与元素边框之间 | 元素边框与其他元素之间 |
| 背景覆盖 | 会显示元素的背景色或背景图 | 不会显示当前元素的背景，是透明区域 |
| 对元素尺寸的影响 | 默认会增加元素的总宽高 | 不会影响元素自身的尺寸，只会影响元素与其他元素的间距 |
特殊场景下的padding使用
在设置行内元素比如<span>的padding时，只有左右方向的padding会生效，上下方向的padding不会影响行内元素的布局位置，只会在视觉上覆盖上下区域。如果是行内块元素<img>或者设置了display: inline-block的元素，四个方向的padding都会正常生效。
另外如果使用box-sizing: border-box属性调整盒模型，那么设置的padding会包含在元素设置的width和height内部，不会增加元素的总尺寸，这个特性在移动端适配或者固定尺寸布局时非常实用。
/* 使用border-box盒模型，padding不会增加元素总尺寸 */
.border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
box-sizing: border-box;
background-color: #e8f4ff;
}
此时这个盒子的总宽度和高度仍然是200px和100px，内容区域会被padding和border挤压，实际内容可用宽度是200px - 20px*2 -2px*2 = 156px，可用高度是100px -20px*2 -2px*2 = 56px。