前端码农

Appearance

margin ​

导航目录 ​

margin（外边距）用于控制元素与元素之间的间距。最常见的两个知识点：

  • 外边距折叠（margin collapsing）：只发生在垂直方向（上下）。
  • 负外边距（negative margin）：会产生“看起来在移动/挤压”的效果。

另外，部分折叠场景可以通过触发 BFC 来规避（例如给父元素设置 overflow: hidden / auto，或 display: flow-root）。

外边距折叠（上下重叠） ​

WARNING

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

TIP

margin-left / margin-right（水平方向）不会发生折叠。

规则与直觉 ​

  • 发生方向：只在上下（vertical）折叠。
  • 常见场景：两个兄弟元素上下排列。
  • 最终间距：折叠后间距 (=\max(margin-bottom, margin-top))。

示例代码 ​

html
<div class="a">A</div>
<div class="b">B</div>
css
.a {
  margin-bottom: 50px;
}

.b {
  margin-top: 30px;
}

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

负外边距（margin 为负值） ​

当 margin 为负数时，本质上是在反向“拉近”间距，因此经常出现“元素自己移动/把别人挤过来”的观感。

负值的常见表现（易记版） ​

  • margin-top: -x：元素本身向上移动。
  • margin-bottom: -x：元素本身通常不动，但会让下方元素向上靠近。
  • margin-left: -x：元素本身向左移动。
  • margin-right: -x：元素本身通常不动，但会让右侧元素向左靠近（可用于制造重叠/紧凑布局）。

演示 ​

margin ​

margin（外边距）用于控制元素与元素之间的间距。它最容易踩坑的地方主要有两类：

  • 外边距折叠（margin collapsing）：只发生在垂直方向（上下）。
  • 负外边距（negative margin）：会产生“看起来在移动/挤压”的效果。

另外，部分折叠场景可以通过触发 BFC 来规避（例如给父元素设置 overflow: hidden / auto，或 display: flow-root）。

外边距折叠（上下重叠） ​

WARNING

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

TIP

margin-left / margin-right（水平方向）不会发生折叠。

规则与直觉 ​

  • 发生方向：只在上下（vertical）折叠。
  • 常见场景：两个兄弟元素上下排列。
  • 最终间距：折叠后间距 (=\max(margin-bottom, margin-top))。

示例代码 ​

html
<div class="a">A</div>
<div class="b">B</div>
css
.a {
  margin-bottom: 50px;
}

.b {
  margin-top: 30px;
}

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

负外边距（margin 为负值） ​

当 margin 为负数时，本质上是在反向“拉近”间距，因此经常出现“元素自己移动/把别人挤过来”的观感。

负值的常见表现（易记版） ​

  • margin-top: -x：元素本身向上移动。
  • margin-bottom: -x：元素本身通常不动，但会让下方元素向上靠近。
  • margin-left: -x：元素本身向左移动。
  • margin-right: -x：元素本身通常不动，但会让右侧元素向左靠近（可用来制造重叠/紧凑布局）。

演示 ​

margin(可以通过触发 BFC 的方式解决) ​

margin-上下重叠 ​

WARNING

2 个相邻的元素 margin-bottom/top，会重叠,已距离大的为准

TIP

margin-left,right 不会出现这个问题

margin-负值 ​