负 margin 移动逻辑分方向：上/左负值使元素自身偏移，右/下负值仅影响后续兄弟元素位置；常用于修复浮动布局溢出、固定尺寸居中及等高列模拟，但对 inline 元素上下无效，inline-block 需配合 vertical-align 才生效。
负 margin 会移动元素，但移动逻辑分方向
负 margin-top 和 margin-left 让元素自身往对应方向偏移；而负 margin-right 和 margin-bottom 不动元素本身，只影响后续兄弟元素的位置——后者会“挤进来”，甚至覆盖当前元素（尤其在 display: block 下，内容不被盖，背景可能被盖）。
-
margin-top: -20px→ 元素上移 20px，下方元素跟着上提 -
margin-left: -15px→ 元素左移 15px，右边 inline 元素紧贴其新左边缘 -
margin-right: -10px→ 当前元素不动，后一个块级元素向左挪 10px，可能叠在它上面 -
margin-bottom: -30px→ 当前元素“在文档流中变矮了”30px，下个元素会上提，但它的height和视觉内容不受影响
解决浮动布局中宽度溢出的典型场景
比如父容器宽 1100px，5 个商品卡片各宽 219px + 2px 边框 → 总宽 (219 + 2) × 5 = 1105px，超 5px。用负 margin 把多余间隙“吃掉”比改结构更轻量。
.product-list {
margin-right: -5px; /* 抵消最后一列多出的右间距 */
}
.product-item {
float: left;
width: 219px;
border: 1px solid #eee;
margin-right: 5px; /* 每项自带右距 */
}- 关键点：父容器加负
margin-right，子项保持正margin-right，避免手动写:last-child - 注意：必须配合
float或清除浮动（如overflow: hidden），否则父容器高度塌陷 - 现代替代方案是
gap+display: grid，但老项目里负 margin 仍是最快补救手段
实现固定宽高的居中与等高列模拟
当不能用 transform: translate(-50%, -50%) 或 Flex 时，负 margin 是传统可靠方案。
.modal {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-left: -200px; /* 宽度一半 */
margin-top: -150px; /* 高度一半 */
}- 仅适用于已知宽高的元素；若宽高动态，需 JS 配合或换方案
- 等高列（旧式三栏）靠的是
margin-bottom: -9999px+padding-bottom: 9999px，本质是让父容器“误判”子列高度一致 - 这种技巧依赖 BFC 触发和 overflow 隐藏，
overflow: hidden在父容器上不能乱删
inline / inline-block 元素对负 margin 的响应差异
负 margin 在不同 display 类型下表现不一，容易误判“没生效”：
立即学习“前端免费学习笔记（深入）”；
-
display: inline：上下margin完全无效（包括负值），左右有效 -
display: inline-block：上下 margin 看似无效，其实是受vertical-align: baseline影响；设成top或middle后，margin-top: -10px就能上移 -
input默认是inline-block，所以margin-top: -10px要配合vertical-align: top才明显
别一看到没动就怀疑 CSS 写错，先查 display 和 vertical-align。
