简写表示法意味着可以通过一次传递 padding 值来缩短代码。
padding 的所有四个值可以一次性传递，也可以一次传递一个、两个或三个值的组合。
1、2、3、4 值声明的 padding 简写代码规则如下：
| 值的数量 | 次序 |
|---|---|
| 1 | 相同的填充应用于所有四个侧面 |
| 2 | 第一个填充值适用于顶部和底部，第二个填充值适用于左侧和右侧 |
| 3 | 第一个填充值适用于顶部，第二个值应用于左右两侧，第三个填充值应用于底部 |
| 4 | 填充值按此顺序应用于顶部、右侧、底部和左侧 |
例
这是一个 padding 简写代码的例子：
简写表示法意味着可以通过一次传递 padding 值来缩短代码。
padding 的所有四个值可以一次性传递，也可以一次传递一个、两个或三个值的组合。
1、2、3、4 值声明的 padding 简写代码规则如下：
| 值的数量 | 次序 |
|---|---|
| 1 | 相同的填充应用于所有四个侧面 |
| 2 | 第一个填充值适用于顶部和底部，第二个填充值适用于左侧和右侧 |
| 3 | 第一个填充值适用于顶部，第二个值应用于左右两侧，第三个填充值应用于底部 |
| 4 | 填充值按此顺序应用于顶部、右侧、底部和左侧 |
例
这是一个 padding 简写代码的例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS - Padding - 简化代码 - 七科普</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>填充简写属性</h3>
<div>
<p style="padding: 50px; border: 1px solid #0b0b0b;">此元素在所有边上都有相同的填充-50px。</p>
<p style="padding: 50px 10%; border: 1px solid #0b0b0b;">此元素的顶部和底部填充为50px，右侧和左侧填充为10%。</p>
<p style="padding: 25px 40px 50px; border: 1px solid #0b0b0b;">此元素的顶部填充为25px，左右填充为40px，底部填充为50px</p>
<p style="padding: 10px 20px 30px 40px; border: 1px solid #0b0b0b;">此元素的顶部填充为10px，左侧为20px，右侧为30px，底部填充为40px</p>
</div>
</body>
</html>