margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。
也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。
margin实列:
margin: 1em; margin: 5% 0; margin: 10px 50px 20px; margin: 10px 50px 20px 0; margin: 0;
注意:上、下外边框的设置对不可替换内联元素，如 <span> 和 <code>，无效。
语法:
/* 应用于所有边 */ 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 个值。每个值可以是 <length>，<percentage>，或 auto。取值为负时元素会比原来更接近临近元素。
当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
可取值
length
以固定值为外边距。
percentage
相对于包含块的宽度，以百分比值为外边距。
auto
让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
小贴士
水平居中
在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。
不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。
外边距重叠
上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。
