CSS - margin

shorthand 表示法意味着可以通过一次传递边距值来缩短代码。

所有四个值可以一次性传递，也可以一次传递一个、两个或三个值的组合。

1、2、3 和 4 值声明的边距速记规则如下：

值的数量	次序
one	相同的边距应用于所有四个边
two	第一个边距适用于顶部和底部，第二个边距适用于左侧和右侧
three	第一个边距适用于顶部，第二个边距适用于左侧和右侧，第三个边距适用于底部
four	边距按该顺序应用于顶部、右侧、底部和左侧

CSS Margin - 基本示例

以下示例演示了速记符号的使用-


<html>
<head>
</head>
<body>
	 	 <h3>margin-shorthand properties</h3>
	 	 <div>
	 	 	 	 <p style="margin: 50px; border: 1px solid #0b0b0b;">This element has same margin on all the sides - 50px.</p>
	 	 	 	 <p style="margin: 50px 10%; border: 1px solid #0b0b0b;">This element has top and bottom margins as 50px and right and left margins as 10%.</p>
	 	 	 	 <p style="margin: 25px 40px 50px; border: 1px solid #0b0b0b;">This element has a top margin as 25px, left and right as 40px and bottom margin as 50px</p>
	 	 	 	 <p style="margin: 10px 20px 30px 40px; border: 1px solid #0b0b0b;">This element has a top margin as 10px, left as 20px, right as 30px and bottom margin as 40px</p>
	 	 </div>
</body>
</html>

打印本页