简写表示法意味着可以通过一次传递 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>