margin 外边距：折叠与负值

margin 用于控制元素与元素之间的间距，看似简单却是高频踩坑点。本篇聚焦两个最容易被面试官追问、也最容易在真实布局里出 bug 的知识点：外边距折叠（只发生在垂直方向，取较大值而非相加）与负外边距（反向拉近，制造移动/重叠观感）。每个概念都配可交互 demo，看得见才记得牢。

导航目录

折叠篇（垂直方向的“合并”陷阱）

• 外边距折叠：上下重叠取较大值

负值篇（反向拉近的移动效果）

• 负外边距：元素自己动 or 挤别人

外边距折叠（上下重叠）

核心规则：折叠只在垂直方向，取较大值

两个相邻块级元素的 margin-bottom / margin-top 在垂直方向会发生折叠，以较大的外边距为准（不是相加）。

水平方向不折叠

margin-left / margin-right（水平方向）永远不会发生折叠，直接相加。

规则与直觉

• 发生方向：只在上下（vertical）折叠，左右不折叠。
• 常见场景：两个兄弟元素上下排列；父子元素之间的 margin 穿透。
• 最终间距：折叠后间距 $= \max(\text{margin-bottom}, \text{margin-top})$。

三种典型折叠场景与规避

一图看懂折叠的发生与规避

        两个块级元素垂直相邻
                │
      margin 是否在垂直方向?
        ┌───────┴────────┐
   否·左右方向        是·上下方向
        │                │
   不折叠·直接相加   发生折叠·取较大值
                         │
                    想规避折叠?
              ┌──────────┼──────────┐
          触发 BFC     更干净       加隔断
              │          │            │
     父级 overflow  父级 display  中间加 border
     :hidden/auto   :flow-root    /padding

示例代码

<div class="a">A</div>
<div class="b">B</div>

.a {
  margin-bottom: 50px;
}

.b {
  margin-top: 30px;
}

/* A 与 B 之间最终间距是 50px（不是 80px） */

负外边距（margin 为负值）

当 margin 为负数时，本质上是在反向“拉近”间距，因此经常出现“元素自己移动 / 把别人挤过来”的观感。它是实现重叠布局、抵消 gap、圣杯布局等技巧的基础。

负值方向速记：带 top/left 动自己，带 bottom/right 动别人

属性	效果	记忆口诀
margin-top: -x	元素本身向上移动	自己往上顶
margin-bottom: -x	本身不动，下方元素向上靠近	拉后面的人上来
margin-left: -x	元素本身向左移动	自己往左挪
margin-right: -x	本身不动，右侧元素向左靠近	拉右边的人过来

规律：top / left 为负 → 动自己；bottom / right 为负 → 动别人（后续元素）。

演示

结语 · 一句话带走

• 折叠：只在上下发生，间距 = max(上, 下)，不是相加；规避靠触发 BFC（overflow: hidden / display: flow-root）或加 border / padding 隔断。
• 负值：top / left 为负动自己，bottom / right 为负动后续元素——记住这条方向规律，重叠布局随手就来。