用 margin 负值抵消边框重叠时看起来仍粗，因其仅解决视觉加粗而不消除物理边框，易致布局错位、点击偏移、hover 跳动、z-index 失效；需结合 position: relative、box-sizing 和容器类型（Flex/Grid 优先用 gap）综合处理。
用 margin 负值抵消边框重叠，为什么有时看起来还是粗？
直接设 margin-top: -1px 或 margin-left: -1px 是最常用的做法，但效果不稳定——不是所有场景都适用。关键在于：它只解决“视觉加粗”，不改变边框物理存在，且容易引发布局错位或点击区域偏移。
常见错误现象：li 水平排列时加了 margin-left: -1px，结果最后一个元素右边框被“吃掉”；上下堆叠时设 margin-bottom: -1px，hover 时边框跳动、z-index 失效。
- 必须配合
position: relative（尤其在需要z-index的交互场景中），否则负 margin 可能导致后续元素层叠顺序异常 - 若盒子用了
box-sizing: content-box（默认），边框宽度会额外撑开尺寸，负 margin 需同步考虑这个增量 - 在 Flex/Grid 容器里慎用——
margin负值可能被容器的对齐逻辑覆盖，不如直接用gap
margin 负值的具体数值怎么定？
不能盲目写 -1px。实际值取决于你希望保留哪一侧边框、以及相邻边框是否等宽。
例如两个 div 垂直堆叠，都设了 border: 2px solid #333，重叠处视觉厚度是 4px。要还原成 2px，需让其中一个边框“退后”2px：
立即学习“前端免费学习笔记（深入）”；
- 上盒子加
margin-bottom: -2px（推荐） - 下盒子加
margin-top: -2px（风险更高，易影响后续元素定位） - 如果上下边框宽度不同（比如上
border-bottom: 1px，下border-top: 3px），按较大值取-3px，否则细边会被盖住
和 border-collapse 混用会怎样？
border-collapse: collapse 对 div、ul 等非表格元素完全无效——这是最常见的误用。有人把 border-collapse 加到包裹 li 的 ul 上，结果毫无反应。
只有真正用 table、tr、td 结构时，border-collapse 才起作用。此时再叠加 margin 负值，反而会破坏表格边框合并逻辑，出现不可预测的间隙或断线。
简单记：非表格结构，别碰 border-collapse；表格结构，优先用 border-collapse，不用 margin 负值。
真正容易被忽略的细节
负 margin 不会影响盒模型尺寸计算，但会改变元素的“渲染占位”——这意味着父容器的 height 或 scrollHeight 可能不准，JS 获取位置时也可能出偏差。如果你在做拖拽、滚动锚点或动画，务必在负 margin 后手动触发一次 getBoundingClientRect() 校验。
