外边距折叠

1.外边距合并

场景:垂直布局的块级元素，上下的margin会合并

结果:最终两者距离为margin的最大值

解决方法:避免就好
• 只给其中一个盒子设置margin即可

2.外边距塌陷

场景:互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

1. 给父元素设置 border-top 或者 padding-top (分隔父子元素的margin-top)
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动

行内元素的margin和padding无效情况

场景:给行内元素设置margin和padding时

结果:

• 水平方向的margin和padding布局中有效
• 垂直方向的margin和padding布局中无效