CSS内边距属性（padding）
点击打开在线编译器，边学边练
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
| 值 | 说明 |
| length | 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的填充 |
| inherit | 指定应该从父元素继承padding |
1. 使用像素值（px）设置填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p.nopadding {
background-color: #00FFFF;
}
p.padding {
background-color: #00FFFF;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 50px;
padding-right: 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距的段落</p>
<p>这是一个指定过填充边距大小的段落</p>
</body>
</html>运行结果：
2. 使用margin简写属性设置填充（厘米值cm、百分比值%）
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
实例:
（1）padding:10px 5px 15px 20px;
a.上填充是 10px
b.右填充是 5px
c.下填充是 15px
d.左填充是 20px
（2）padding:10px 5px 15px;
a.上填充是 10px
b.右填充和左填充是 5px
c.下填充是 15px
（3）padding:10px 5px;
a.上填充和下填充是 10px
b.右填充和左填充是 5px
（4）padding:10px;
a.所有四个填充都是 10px
注意： 负值是不允许的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {
background-color: orange;
}
p.ex1 {
padding: 2cm 6cm 3cm 8cm;
}
p.ex2 {
padding: 5% 30%;
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距大小的段落</p>
<p>这是一个使用"厘米cm"指定填充边距大小的段落</p>
<p>这是一个使用"百分比值%"指定填充边距大小的段落</p>
</body>
</html>运行结果：
| 属性 | 描述 |
| padding-top | 设置元素内容区上方的内边距 |
| padding-right | 设置元素内容区右侧的内边距 |
| padding-bottom | 设置元素内容区下方的内边距 |
| padding-left | 设置元素内容区左侧的内边距 |
| padding | 内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距 |
本文固定URL：https://www.dotcpp.com/course/1144
上一课：