margin-right 在最后一列仍占空间是因为浏览器不识别视觉末列，:last-child 匹配结构末项而非末列，gap 或伪元素才是可控解法。
为什么 margin-right 在最后一列仍占空间？
因为浏览器不会自动“识别哪一列是最后一列”——margin-right 是逐个元素应用的，它只看当前元素自身，不感知布局换行、列数或容器宽度。你给每个子项统一设 margin-right: 12px，DOM 里最后一个 <li> 或 <div> 依然会执行这条规则，结果就是右侧多出 12px 空隙，可能撑破父容器、触发横向滚动条，或让整行看起来右偏。
:last-child 为什么经常选不到真正的“最后一列末尾项”？
这是最常被忽略的根源。伪类 :last-child 匹配的是 HTML 结构中**最后一个子节点**，不是视觉上“最后一行最右边那个”。当总项数不能被每行列数整除时（比如 11 项、每行 4 个），最后一行只有 3 项，但 :last-child 仍是第 11 项——它在末行第 3 列，而非末列。此时 .item:last-child { margin-right: 0 } 生效了，但没解决末列留白问题。
- 小屏每行 2 个、大屏每行 4 个 →
:last-child在不同断点下指向不同列位置 - JS 动态插入空节点（如
<div class="spacer"></div>）→:last-child指向 spacer，真实末项被跳过 - HTML 中存在注释或换行符生成的文本节点 →
:last-child可能根本没匹配到任何元素
用 margin-right: -12px 强行抵消？别碰
它看似“管用”，实则是把问题藏得更深：margin-right: -12px 不参与盒模型对齐计算，会导致缩放时像素失准（Chrome 放大后变成 -13.2px）、与 box-sizing: border-box 冲突、破坏父容器 width: 100% 的稳定性，且会让右侧留白消失甚至反向穿出边界。这不是修复，是掩盖——你之后再也不会去查 computed 样式里真实的 border、padding、line-height 是否一致。
真正可控的解法：伪元素补位 or gap
现代项目优先用 gap；老浏览器兼容场景用伪元素，二者都绕开“猜哪一个是末项”的陷阱：
立即学习“前端免费学习笔记（深入）”；
- Flex 布局直接写
gap: 12px—— 浏览器原生控制间距，末行自动无右侧间隙，无渲染偏差 - 必须用 float 或 inline-block？改用
::after占位：.container::after { content: ""; flex: 0 0 100%; height: 0; overflow: hidden; }，它强制浏览器认为该行已满，自然不暴露末项右侧空隙 - 若用 inline-block，记得父容器设
font-size: 0消除空白符间隙，再在子项上重置font-size，否则margin-right会被看不见的空格干扰
复杂点不在怎么写 CSS，而在于是否愿意放弃“靠一个 :last-child 解决所有情况”的幻想——真实布局里，末列位置是动态的，得用动态思路应对。
