css盒子模型外边距（margin）

外边距(margin)

margin属性用于设置外边距,即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-botom	下外边距

外边距典型应用
外边距可以让块级盒子水平居中, 但是必须满足两个条件：
①盒子必须指定了宽度(width)
②盒子左右的外边距都设置为auto

.header{width: 960px; margin: 0 auto}

常见的写法:
margin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto;

外边距合并
1.使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值。
注：浮动的盒子不会有外边距合并的问题

解决方案:
①可以为父元素定义边框
②可以为父元素定义内边距
③可以为父元素添加overflow:hidden