CSS外边距塌陷疑问：外层盒子仅顶部与body分离的原因

场景1：外层容器包含文本内容时的表现 #

对应的HTML+CSS代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
        .in {
            margin: 50px;
            height: 150px;
            width: 150px;
            background-color: rgba(100, 100, 50, 0.5);
        }
        .out {
            height: 300px;
            width: 300px;
            background-color: rgba(200, 200, 200, 1);
        }
    </style>
</head>
<body>
    <div class="out">this is out<div class="in">This is in</div></div>
</body>
</html>

此时内层.in盒子的margin会让它与外层.out盒子的左上角分离，而外层.out盒子和body的左上角完全贴合，未出现外边距塌陷。

场景2：移除外层容器文本后的表现 #

修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .in {
            margin: 50px;
            height: 150px;
            width: 150px;
            background-color: rgba(100, 100, 50, 0.5);
        }
        .out {
            height: 300px;
            width: 300px;
            background-color: rgba(200, 200, 200, 1);
        }
    </style>
</head>
<body>
    <div class="out"><div class="in">This is in</div></div>
</body>
</html>

此时外层.out盒子会因为外边距塌陷和body顶部产生间距，但左侧仍然和body贴合。

原因解析 #

要理解这个差异，得明确CSS外边距塌陷的两个核心规则：

1. 仅垂直方向的块级元素外边距会发生塌陷，水平方向的外边距不存在这种合并逻辑。
2. 父子元素间的垂直外边距塌陷，需要满足一个前提：父容器和第一个子元素之间没有任何“阻隔”（比如内联元素、边框、padding）。

场景1未塌陷的原因 #

外层.out容器里的文本属于内联元素，它会生成行盒，相当于在父容器和第一个子元素.in之间形成了阻隔，直接阻止了父子垂直外边距的合并。此时子元素的margin完全作用在父容器内部，无法“穿透”到父容器外部。

场景2仅顶部塌陷的原因 #

移除外层容器的文本后，父容器.out和第一个子元素.in之间没有了任何阻隔，触发了父子垂直外边距塌陷——子元素的顶部外边距会和父容器的顶部外边距合并，表现为父容器整体和body顶部产生间距。

而水平方向的外边距不会合并，子元素.in的左侧margin只会让自身在父容器内向右偏移，父容器的左侧依然和body贴合，不会跟着子元素的margin移动。

内容的提问来源于stack exchange，提问作者YoavKlein