margin-right: -12px 会让最后一个列表项“消失”是因为负边距将元素向右硬拉导致溢出父容器；正确做法是用 li:not(:last-child) 控制间距，flex 布局中优先使用 gap，响应式场景应配合 css 变量与 calc()。
为什么 margin-right: -12px 会让最后一个列表项“消失”
这不是浏览器 bug，而是负 margin 的视觉偏移直接作用于元素边界——当给所有 li 都加 margin-right: -12px，最后一项的右侧会向右溢出父容器。若父容器没设 overflow: hidden，它可能被裁掉或触发横向滚动条；若设了，它就真“看不见”了。关键点在于：负 margin 不是“取消间距”，而是把元素往右（或左）硬拉，它不区分“是不是末尾”。
li:not(:last-child) 是最安全的写法
真正要消除的是“项与项之间”的间隙，不是“末尾本身”。所以只对非末尾项施加右间距，再用负 margin 回撤——逻辑更清晰，也避免越界。
- 给每个
li设margin-right: 12px - 再用
li:not(:last-child) { margin-right: 0; }清除所有非末尾项的右距（等价于只留最后一项有右距） - 如果必须用负值微调（比如合并边框），写成
li:not(:last-child) { margin-right: -1px; }，仅影响中间连接处
Flex 布局下别硬套负 margin
在 display: flex 容器里，gap 才是控制项间距离的正统方式。此时写 li:not(:last-child) { margin-right: -12px; } 不仅多余，还可能和 gap 叠加导致错位。现代浏览器都支持 gap，优先用：
ul {
display: flex;
gap: 12px;
}
若需兼容旧浏览器，用 @supports (gap: 0) 降级，而不是靠负 margin 补丁。
移动端和辅助功能下的隐藏风险
固定像素值的负 margin（如 -12px）在以下场景容易失效：
- iOS “更大字体”开启时，行高变化但负值不变，导致重叠或露白
- 视口缩放后，
12px物理尺寸失准，视觉对齐偏移 - 屏幕阅读器聚焦时，负 margin 可能让焦点框错位到可视区外
真要响应式控制，用 CSS 自定义属性 + calc()：margin-right: calc(-1 * var(--item-gap));，并在 @media 中同步更新 --item-gap 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
