持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
外边距
margin属性用于设置外边距，控制盒子与盒子之间的距离。
相关属性有：
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
margin简写的方式和代表的意思和padding相同。
我们可以用外边距来做什么呢？它的典型应用就是可以让块级盒子水平居中，但是必须满足两个条件，即盒子必须指定了宽度，且盒子左右的外边距都设置为auto。
有三种常见写法：
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;(常用)
那我们如果想让行内元素或者行内块元素水平居中，只要给其父元素添加text-align:center即可。
外边距合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。 解决方案：尽量只给一个盒子添加margin值。
清除内外边距
我们不难发现，网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。具体格式如下：
* {
padding:0;清除内边距
margin:0; 清除外边距
}
我们要尽量给行内元素只设置左右的内外边距，因为上下内外边距不起作用，如果我们想要设置上下左右内外边距，可以转化为块级元素，块级元素可以设置上下左右内外边距。
