什么是padding？
padding是CSS盒模型的一部分，用于控制容器内部元素与边框之间的距离。它可以在上下左右四个方向上设置不同的值。padding的值可以是长度单位（px、em、rem等），也可以是百分比。如下图所示，padding会扩大盒子的大小，以容纳更多的内容。
如何使用padding？
使用padding非常简单，只需在CSS样式表中指定相应的属性值即可。例如：
.box { padding: 10px; }
这段代码会在.box元素的上下左右四个方向都添加10像素的内边距。如果要在不同方向上设置不同的值，可以使用如下代码：
.box { padding-top: 20px; padding-right: 15px; padding-bottom: 10px; padding-left: 5px; }
这段代码会在.box元素的上方添加20像素的内边距，在右侧添加15像素的内边距，在下方添加10像素的内边距，在左侧添加5像素的内边距。
此外，还可以使用百分比的方式来设置padding值。例如：
.box { padding-top: 20%; padding-right: 15%; padding-bottom: 10%; padding-left: 5%; }
这段代码会在.box元素的上方添加20%的内边距，在右侧添加15%的内边距，在下方添加10%的内边距，在左侧添加5%的内边距。
padding的实例演示
为了更好地理解padding的用法，我们来看一些实例演示。
实例1：设置不同方向上的padding值
<div class="box"> <p>这是一个段落。</p> </div>
.box { width: 200px; height: 100px; border: 1px solid #000; padding-top: 20px; padding-right: 15px; padding-bottom: 10px; padding-left: 5px; }
实例2：使用百分比设置padding值
<div class="box"> <p>这是一个段落。</p> </div>
.box { width: 200px; height: 100px; border: 1px solid #000; padding-top: 10%; padding-right: 15%; padding-bottom: 20%; padding-left: 5%; }
总结
本文介绍了CSS盒模型中的一部分——padding。它用于控制容器内部元素与边框之间的距离，并可以在上下左右四个方向
