您实际上看到的是#inner元素的顶部边缘塌陷到元素的顶部边缘#outer，仅保留了#outer边缘空白（尽管未在图像中显示）。两个框的顶部边缘彼此齐平，因为它们的边距相等。
以下是W3C规范的相关要点：
8.3.1利润下降 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距。以此方式合并的边距被称为崩溃，并且合并后的边距被称为崩溃边距。
相邻的垂直边距崩溃[…]
当且仅当以下情况，两个边距相邻：
您可以执行以下任一操作来防止边距崩溃：
浮动任何一个div元素
上述选项防止边距崩溃的原因是：
左右边距的行为符合您的预期，因为：
水平边距永远不会崩溃。
602392714
清零编程群