CSS -- 盒子模型 margin 的特点

margin在使用过程中具有如下的两个特点：

1.垂直外边距塌陷

　　　　　　　　--给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置 

 

　　解决方式：

1. 给父元素设置边框
2. 给父元素设置overflow:hidden;
3. 让子元素脱标(浮动| 定位)

 

2. 垂直外边距合并

　　　　　　　　--如果给元素设置上下margin,那么最后的margin值会以最大值为准

　　解释:

• 如果有上下两个盒子,给上面盒子设置margin-bottom:100px;给下面的盒子设置margin-top:50px;那么两个盒子上下之间的间距为100px.(即:margin值在垂直方向会合并).
• 如果有左右两个盒子,给左面盒子设置margin-right:100px;给右面的盒子设置margin-left:50px;那么两个盒子左右之间的间距为150px.(即:margin值在水平方向不会合并).