负 margin 不会让元素消失或脱离文档流，而是改变其位置、尺寸及与其他元素的相对关系；影响分自身位移（top/left）、相邻元素间距（right/bottom）及盒模型占用空间（auto宽高时）。
负 margin 不会让元素“消失”或“脱离文档流”，但它会改变元素在布局中的位置、尺寸，以及与其他元素的相对关系。关键在于区分“对自身的影响”和“对其他元素的影响”，同时注意是否涉及浮动、定位或 BFC 环境。
负 margin 对自身位置的影响
当设置 margin-top 或 margin-left 为负值时，元素会向对应方向偏移：
- margin-top: -20px → 元素整体上移 20px
- margin-left: -20px → 元素整体左移 20px
- 这种位移不改变元素在文档流中的原始占位（除非配合 float/position），后续兄弟元素仍按原位置排布
负 margin 对相邻元素的影响
当设置 margin-right 或 margin-bottom 为负值时，主要影响的是后面的元素：
- margin-right: -10px → 右侧紧邻的行内或块级元素向左靠拢 10px
- margin-bottom: -15px → 下方元素向上靠拢 15px
- 当前元素自身不会上下/左右位移，但它的“外边距空间”被压缩，视觉上造成重叠效果
负 margin 对盒模型尺寸的隐式影响
当元素宽度/高度为 auto 时，负 margin 可能扩大其实际占用空间：
立即学习“前端免费学习笔记（深入）”；
- margin-left: -10px + margin-right: -10px → 盒子总宽度增加 20px（内容区不变，但左右外边距“反向撑开”）
- 这对未设 width 的块级元素尤其明显，比如
div在容器中默认 fill，加负左右 margin 后可能溢出父容器 - margin-top/margin-bottom 负值不会增加高度，仅触发位移或压缩垂直间距
负 margin 在常见布局场景中的作用
它不是 bug，而是可控的布局技巧：
-
消除浮动间隙：多个
float: left元素间用margin-left: -1px实现无缝拼接，避免双倍边框 - 实现圣杯/双飞翼核心结构：通过负 margin 拉回侧栏，让中间内容优先渲染又保持语义顺序
- 突破父容器限制：如父元素有 padding/border，子元素用负 margin 可“伸出”到 padding 区甚至 border 内侧
-
hover 层级控制：配合
position: relative和z-index，让悬停项浮于其他同级元素之上
