为什么子div的保证金不会与父代div崩溃

Question

我正在尝试学习利润率何时下降。

我关注了这篇文章： 保证金崩溃的处理方法是什么？ 而且仍然不明白为什么以下边距不会崩溃。

我违反了哪一条规则？

 .container1 { background-color: red; border-style: solid; border-color: black; margin-top: 10em; } .container2 { background-color: green; border-style: solid; border-color: purple; margin-top: 10em; } 

 <div class="container1"> <div class="container2"> aaaaa </div> </div> 

Answer 1

根据“ 层叠样式表（CSS）-W3.ORG的官方定义”，他们说：

当且仅当以下情况，两个边距相邻：

....

• 没有线框，没有间隙，没有填充和没有边框将它们分开

...

在您的情况下，请尝试删除border-style: solid; 像这样：

    .container1 {
        background-color: red;
        border-color: black;
        margin-top: 100px;
    }

    .container2 {
        background-color: green;
        border-color: purple;
        margin-top: 100px;
    }

倒塌的保证金将发生。