前端CSS精讲02：外边距合并与塌陷，彻底解决布局间距错乱
前端CSS精讲02：外边距合并与塌陷，彻底解决布局间距错乱
文章目录
- 前端CSS精讲02：外边距合并与塌陷，彻底解决布局间距错乱
- 一、什么是外边距合并？
- 常见场景：兄弟元素上下相邻
- 二、什么是外边距塌陷？
- 常见场景：父子元素嵌套
- 三、外边距合并的解决方案
- 四、外边距塌陷的四种解决方法（必掌握）
- 1\. 给父元素添加边框（border）
- 2\. 给父元素添加内边距（padding）
- 3\. 给父元素开启溢出隐藏（overflow:hidden）
- 4\. 把父元素转为行内块元素（display:inline\-block）
- 五、核心知识点总结
- 六、开发避坑提示
大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。
上一节我们吃透了CSS盒模型，知道了margin是用来控制盒子与盒子之间的外边距。很多新手写布局时，明明设置了margin间距，页面效果却和预想的不一样，要么间距没生效，要么两个盒子的间距重叠变小，这就是典型的外边距合并和外边距塌陷问题，也是CSS布局的高频坑点和面试考点。
一、什么是外边距合并？
外边距合并，也叫margin重叠，指的是两个相邻的块级元素，在垂直方向上的margin会发生合并，最终取两者中较大的值作为最终间距，水平方向的margin不会出现合并现象。
常见场景：兄弟元素上下相邻
比如上方盒子设置下外边距margin-bottom:20px，下方盒子设置上外边距margin-top:30px，两个盒子之间的最终间距不是50px，而是取较大值30px。
.box1{width:200px;