CSS外边距塌陷：为什么相邻块级元素的margin会合并而不是叠加？-css教程-PHP中文网

CSS外边距塌陷：为什么相邻块级元素的margin会合并而不是叠加？

花韻仙語

发布： 2025-03-02 13:04:13

原创

372人浏览过

css外边距塌陷：为什么相邻块级元素的margin会合并而不是叠加？

CSS外边距塌陷详解：避免margin合并的技巧

在CSS布局中，经常会遇到外边距塌陷(margin collapsing)的问题，导致相邻块级元素的外边距合并，而不是叠加。这会使页面布局与预期不符。本文将通过实例分析外边距塌陷的原因，并提供解决方法。

以下代码演示了典型的margin塌陷：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      background-color: yellow;
    }

    .one {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .two {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="one">one</div>
  </div>
  <div class="container">
    <div class="two">two</div>
  </div>
</body>
</html>

登录后复制

预期中，两个.container元素间的垂直间距应为60px (20px + 40px)，但实际结果并非如此。这是因为.one元素的margin-bottom和.two元素的margin-top发生了塌陷。

立即学习“前端免费学习笔记（深入）”；

浏览器渲染机制导致了这种现象。对于垂直方向上的外边距，如果两个块级元素是父子关系或相邻兄弟关系（且父元素无padding或border），浏览器会取这两个外边距的最大值作为最终间距。因此，例子中最终间距为40px，而不是60px。

解决外边距塌陷的方法：