这是我参与2022首次更文挑战的第13天
7.外边距（margin）
1）margin属性用于设置外边距，即控制盒子和盒子之间的距离；margin简写方式代表的意义跟padding完全一致。
2）外边距典型应用，外边距可以让块级盒子水平居中，但是必须满足两个条件：
a.盒子必须指定了宽度（width）。
b.盒子左右的外边距都设置为auto（上下边距不做要求）。
语法：
.header{
width:900px;
margin: 0 auto;
}
3）常见的写法，以下三种均可以：
margin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto;
4）注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
8.外边距合并
使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值。
2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。解决方案（三点为或者的关系，有三种方法）：
a.可以为父元素定义上边框（会使盒子变大）。
b.可以为父元素定义内边距（会使盒子变大）。
c.可以为父元素添加overflow:htdden（不会使盒子变大）。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面再进行总结。
9.清除内外边距
网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。这句话也是我们CSS的第一行代码。
1)语法：
*{
padding:0; /清除内边距/
padding:0; /清除外边距/
}
2)注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内元素就可以了。
行内元素 尽量只设置左右的内外边距，不要设置上下内外边距（没有效果）。
