grid项垂直方向margin失效是设计机制而非bug，因其直系子项脱离文档流，margin-top/margin-bottom被完全忽略；真正控制间距的是gap属性，margin仅影响自身盒模型及内部布局。
Grid 项的 margin 在垂直方向（margin-top/margin-bottom）根本不会影响相邻项间距，这是 Grid 布局的设计机制，不是 bug。
为什么 margin 在 Grid 中“失效”？
Grid 容器的直系子项（即直接写在 display: grid 父元素里的元素）已脱离普通文档流。它们的垂直外边距不参与间距计算——既不合并，也不叠加，而是被完全忽略。你写 margin-top: 30px，上方邻居的位置不会变，自身只是在分配到的轨道空间内“上浮”，但轨道高度和 gap 不受影响。
水平方向的 margin-left/margin-right 仍生效，但只改变该项在列轨道内的对齐位置（比如靠右、居中），并不影响列与列之间的实际间隙。
真正控制项间距离的是容器级的 gap、row-gap 或 column-gap。
什么时候必须用 margin？
当你要微调单个网格项内部结构，或它内部还有嵌套布局时，margin 依然关键且不可替代：
- 卡片内部标题与正文之间用
margin-bottom: 12px分隔，不影响卡片之间gap - 网格项里嵌套一个
display: flex容器，其子按钮用margin-right: 8px横向排列 - 让某个项横跨两列后右侧留空，用
margin-right: auto或margin-right: -16px实现破格对齐 - 需要局部重叠（如标签角标），用负
margin-top上移，但注意这不会压缩上方项的gap空间
box-sizing 和 padding/border 怎么影响 Grid 项尺寸？
Grid 轨道分配的是“可用空间”，而子项最终渲染尺寸由盒模型决定。若未设 box-sizing: border-box，且子项有 padding: 16px 和 border: 2px，那么 width: 100% 实际会撑到 100% + 32px + 4px，导致溢出或滚动条。
务必全局设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
否则：gap: 16px 看起来很准，但某张卡片因 padding 撑大了，视觉上就“错位”了。
别混用 gap 和子项 margin 做间距
如果容器设了 gap: 12px，同时某个子项又写了 margin: 8px，那实际垂直/水平间距会变成 12px + 8px + 8px = 28px（上下/左右各叠加一次）。这不是“增强”，是意外留白。
更糟的是：首尾项的 margin 还可能把内容推出容器边界，尤其在响应式断点切换时难以排查。
真正需要独立控制某一项间距时，优先考虑：align-self / justify-self 调整对齐，或用 grid-column / grid-row 扩展轨道范围，而不是靠 margin “硬推”。
复杂点在于：margin 对 Grid 项自身盒模型始终有效，但它和 gap 属于两个正交维度——一个管内部占位，一个管外部框架。混淆这两者，是绝大多数 Grid 间距失控的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
