CSS - 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>

打印本页