CSS - 外边距

简写表示可以通过一次性传递外边距值来缩短代码。

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

一个、两个、三个和四个值声明的外边距简写符号规则如下：

值的数量	顺序
一个	相同的边距应用于所有四个边
两个	第一个边距应用于顶部和底部，第二个应用于左侧和右侧
三个	第一个边距应用于顶部，第二个应用于左侧和右侧，第三个应用于底部
四个	边距依次应用于顶部、右侧、底部和左侧

CSS 外边距 - 基本示例

以下示例演示了简写符号的使用：

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

打印页面