为什么子div的边距不会与父边距div崩溃

Question

我正在尝试学习边距何时崩溃。

我关注了这篇文章：What’s the Deal with Margin Collapse?，但仍然不明白为什么以下边距不会消失。

我违反了哪个规则？

.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

根据W3.ORG的Cascading Style Sheets (CSS) - The Official Difinition，他们说：

  

当且仅当：      

....

     

  
• 没有线框，没有间隙，没有填充，并且没有边框分隔
  

     

...

根据您的情况，尝试像这样删除border-style: solid;：

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

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

折叠边距 会发生。