前端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;