一、什么是 margin 折叠只有块级盒子才会出现这个现象 上下挨在一起的两个块盒子它们上下方向的外边距碰到一起不会叠加会合并成一个外边距只保留数值更大的那一个。两个关键点只在上下垂直方向生效margin-top/margin-bottom左右水平外边距margin-left/margin-right永远不会折叠二、三种会发生折叠的情况两个兄弟盒子上下挨着上面盒子的底部外边距和下面盒子的顶部外边距合并。父子嵌套盒子父盒子没有边框、内边距、BFC 隔离时子盒子的上下外边距会 “穿出去”和父盒子外边距合并。完全空的块盒子盒子里面没有文字、没有边框、没有内边距它自己的顶部和底部外边距会互相合并。三、5 种解决折叠的简单方法方法 1父盒子用内边距 padding子盒子取消外边距不用子元素 margin 撑开距离改用父元素 padding从根源避免折叠方法 2给父盒子加边框 / 一点点内边距边框能隔开父子的外边距透明边框不影响页面外观方法 3给子盒子加浮动或者绝对定位浮动、绝对定位的盒子脱离普通文档流不会出现 margin 折叠方法 4父盒子用 flex/grid 弹性布局只要父容器设为弹性布局里面子元素的外边距不会穿透父盒子方法 5父盒子开启 BFC最常用最简单写法父盒子设置overflow: hidden创建独立格式化区域锁住子元素 margin四、实操完整例子1. 原生状态出现 margin 折叠子盒子的上边距会穿透父盒子整个灰色父盒子一起往下移而不是子盒子在父内部下移2. 用 BFC 修复后折叠消失父盒子加overflow: hidden子盒子的外边距被限制在父盒子内部五、注意细节只有普通文档流的块级元素才会折叠行内元素、浮动、绝对定位盒子无折叠负数外边距也会折叠最后取两个负数里相对更大没那么负的值左右水平 margin 永远不会折叠不用考虑
