CSS margin(外边距)

CSS margin(外边距)

marging

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

语法:

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

注释：允许使用负值。

举例说明，例子1:
···
margin:10px 5px 15px 20px;
···

• 上外边距是 10px
• 右外边距是 5px
• 下外边距是 15px
• 左外边距是 20px

例子2:

margin:10px 5px 15px;

• 上外边距是 10px
• 右外边距和左外边距是 5px
• 下外边距是 15px

更多例子

margin: 5%;                 /* 所有边：5% 的外边距 */

margin: 10px;               /* 所有边：10px 的外边距 */

margin: 1.6em 20px;         /* 上边和下边：1.6em 的外边距 */
                            /* 左边和右边：20px 的外边距  */

margin: 10px 3% -1em;       /* 上边：10px 的外边距 */
                            /* 左边和右边：3% 的外边距   */
                            /* 下边：     -1em 的外边距 */

margin: 10px 3px 30px 5px;  /* 上边：10px 的外边距 */
                            /* 右边：3px 的外边距  */
                            /* 下边：30px 的外边距 */
                            /* 左边：5px 的外边距  */

margin: 2em auto;           /* 上边和下边：2em 的外边距 */
                            /* 水平方向居中            */

margin: auto;               /* 上边和下边：无外边距 */
                            /* 水平方向居中        */