CSS 内边距padding的简写设置方法
内边距
什么是CSS的内边距？即HTML元素的内容区到元素边界之间的距离，比如下方的这个图示中，文字到各边框的距离（注意右边距为什么那么大？下方的实例将给出相应的解释），其中边框不是一定需要的，这里只是为了更清晰地展示内边距而特意设置的。在CSS中，可以通过padding属性来为HTML的元素设置内边距。
内边距展示
padding设置内边距的语法
使用padding设置内边距一般为简写的形式：
- padding:value；用一个值设置相等的上下左右内边距
- padding:value1 value2；两个值的方式，value1表示上下内边距，value2表示左右内边距
- padding:value1 value2 value3；value1表示上内边距，value2表示左右内边距，value3表示下内边距
- padding:value1 value2 value3 value4；分别设置元素的上下左右内边距
padding属性值
| 值 | 描述 |
|---|---|
| len | 长度值，单位为px、pt、cm等 |
| 百分比 | 单位为%，长度是相对于元素宽度的百分比 |
| inherit | 从父元素继承内边距属性 |
提示：padding不允许负值
padding实例代码，及在线编辑器
<p class='p1'>内容一</p>
<p class='p2'>内容二</p>
<p class='p3'>内容三</p>
<style>
.p1{padding:10%;}
.p2{padding:20px;border:1px solid blue;}
.p3{border:1px solid skyblue;}
</style>实例代码解析
如上代码，通过内容一和内容二的CSS样式对比可以发现，内容一的p元素并没有设置边框，但这丝毫不影响该元素的内边距padding元素的设置。
回到上面开始的时候提到的内容二的右内边距为什么会那么大，不是明明只设置了20px吗？接下来的内容纯粹是个人理解，不保证正确性，仅供参考：内容三的p元素只设置了一个边框，而且没有设置width宽度，可是变宽的宽度默认得跟容器（父元素——扣除父元素的内边距）的宽度相同，因此内容二的宽度不管有没有设置padding，都是跟父元素的相同，也就是说，其内容到右边框的实际距离——内边距远比设置的20px要大很多，因此实际的内边距将其覆盖了。注意，padding设置的是内边距，不是position那样设置的是位置，二者不能等同理解。
可以在上面的在线编辑器中，增加内容二的文本内容，要足够多，一行写满，大到“实际的内边距”比设置的数值“小”，然后运行看看，右内边距的效果就出来了。