grid容器内部子元素仍会触发margin塌陷，因grid不自动阻止普通流块级子项与父容器的垂直外边距合并；正确解法是清空子项margin并改用gap控制间距。
Grid容器内部的子元素仍会触发margin塌陷
Grid容器本身不阻止其子项（尤其是块级子项）与父容器之间发生垂直外边距塌陷。哪怕你用了 display: grid，只要子项是普通流中的块级盒（比如 div），且父容器没触发BFC、无border/padding，margin-top 就会“穿透”上去，导致整个Grid容器下移。
这不是Grid的bug，而是CSS规范对「普通流中块级盒」的统一行为——Grid只定义了容器布局模型，不自动隔离子项的margin传播。
- 常见错误：给Grid项（
.item）设margin-top: 20px，以为它只在网格轨道内生效，结果整个.grid容器离顶部远了20px - 调试技巧：临时加
background: #eee到Grid容器，观察子项是否“顶着”容器上边缘；如果是，基本坐实塌陷 - 注意：Grid项若设了
display: contents或display: flow-root，塌陷行为会改变，但前者移除盒本身，后者才真正创建BFC
用 gap 替代子项 margin 是最干净的解法
Grid的 gap 是专为轨道间距设计的，它和子项的 margin 完全无关、不叠加、不抵消。一旦你同时用两者，就会出现双倍间距或响应式错位。
正确做法是：把所有子项的 margin 彻底清零，只靠 gap 控制网格内间距。
- 必须重置：写
.grid > * { margin: 0; }，不能漏掉任何直接子项 - gap支持响应式：
gap: clamp(8px, 1vw, 16px)比用媒体查询调margin更可靠 - 如果需某一项额外留空，改用
align-self: start+ 内部padding，而非外部margin
Grid容器自身作为子元素时，仍需防塌陷
当一个Grid容器被嵌套在另一个块级容器中（比如 section > .grid），它自己也可能成为塌陷链的一环：若外层 section 没border/padding，且Grid容器设了 margin-top，这个margin仍可能和上一个兄弟元素合并。
此时问题不在Grid，而在外层普通流结构。解决方式和普通块级盒一致：
- 给外层容器（如
section）加border-top: 1px solid transparent—— 兼容性好，无视觉副作用 - 或设
section { display: flow-root; }，语义清晰，现代浏览器全覆盖（Chrome 64+/Firefox 59+/Safari 15.4+） - 避免用
overflow: hidden，除非你确认Grid内容绝不会溢出（比如含position: absolute的下拉菜单）
Flex/Grid子项内部仍可能塌陷
Grid项（或Flex项）内部如果还嵌套普通块级盒，塌陷照常发生。例如：一个Grid项里放两个上下排列的 div，它们的 margin-bottom/margin-top 依然会合并。
这容易被忽略，因为开发者以为“用了Grid就万事大吉”。其实塌陷只看盒是否在普通流中，跟父容器是Grid/Flex无关。
- 验证方法：打开DevTools，看computed样式中两个相邻块级盒的
margin-top和margin-bottom是否被合并为单个值 - 修复优先级：先尝试在内部加
padding替代margin；若不行，再给中间容器加display: flow-root - 别依赖
min-height: 0来“强制”BFC——它只对Flex/Grid项有效，对普通块级盒无效
实际布局中，最容易被绕过的点是：塌陷发生在渲染树的盒层级，不是CSS规则层级。你写了 gap，但忘了清 margin；你用了 display: grid，却没意识到子项仍是普通流块级盒——这些都会让塌陷悄悄回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
