CSS margin 外边距：简写、margin auto 与外边距折叠

margin 是什么

margin（外边距）是元素边框外侧的空间。它始终是透明的，作用是把其他元素推开。在下面的示例中，灰色容器透过蓝色盒子周围的外边距显露出来：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

灰色的那一圈不属于盒子：盒子自身的背景到边框就停止了。如果想要带有元素背景的空间，请使用 padding。

margin 简写

margin 接受一到四个值，顺序和 padding 一样，按顺时针排列：

每一边也有自己的属性（margin-top、margin-right、margin-bottom、margin-left），还有跟随文字方向的逻辑属性（margin-inline-start、margin-inline-end、margin-block、margin-inline）。

和 padding 不同，margin 可以取 auto 和负值：

用 margin: 0 auto 居中

margin: 0 auto 是让块级元素水平居中的经典写法。两侧都设为 auto，就是告诉浏览器把剩余空间平均分配。元素的宽度必须小于容器，否则没有剩余空间可分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

在常规流中，auto 外边距不能垂直居中（垂直方向的 auto 外边距会变成 0），对行内元素也不起作用。想全面了解居中方法，请看如何让 div 居中。

外边距折叠

两个垂直外边距相接时，它们不会相加，浏览器只保留较大的那个。这里第一个盒子设置了 margin-bottom: 30px，第二个设置了 margin-top: 20px，它们之间的间距是 30px，而不是 50px：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

折叠是有意设计的：它让段落和标题可以各自带上自己的间距，相遇时又不会翻倍。真正容易让人踩坑的是第二种情况：子元素的上外边距跑出了父元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

在第一个父元素中，子元素 30px 的外边距穿过父元素的上边缘发生了折叠，所以它把整个父元素往下推，而不是在父元素内部留出灰色空间。下面任意一种做法都能阻止它：

• 给父元素设置 display: flow-root（和 overflow: hidden 不同，它不会裁剪任何内容）。
• 给父元素的上边缘加上内边距或边框。
• 让父元素成为 flex 或 grid 容器：flex 和 grid 项目的外边距永远不会折叠。

水平外边距永远不会折叠，浮动元素和绝对定位元素的外边距也不会。

负外边距

负外边距朝相反方向拉。设在上方或起始一侧时，它移动的是元素本身；设在下方或结束一侧时，它把下一个元素拉近。盒子之间可能重叠：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

flexbox 中的 margin auto

在 flex 容器中，auto 外边距会占据它那一侧的全部剩余空间。这是把某一项推到一行最末端的最简单方法，而且在 flexbox 中 auto 在垂直方向上同样有效：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto 把剩余空间放在“Log in”之前，无论页面是从左到右还是从右到左，它都会出现在这一行的末端。

常见错误

• 在没有宽度的元素上使用 margin: 0 auto。 块级元素本来就会占满容器；请设置 width 或 max-width。
• 在行内元素上使用 margin: auto。 保持行内的 span、a 或 img 的 auto 外边距等于 0。把它改成 display: block。
• 把两个垂直外边距相加，以为会得到它们的和。 它们会折叠成较大的那个；在 flex 或 grid 中使用 gap，或者始终只用一个方向的外边距。
• 子元素的外边距把父元素推开。 这是父子外边距折叠；给父元素加上 display: flow-root。
• 在需要背景的地方用 margin 留空。 margin 是透明的；请改用 padding。