html - 为什么子 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

根据Cascading Style Sheets (CSS) - The Official Difinition来自 W3.ORG，他们说:

Two margins are adjoining if and only if:

....

• no line boxes, no clearance, no padding and no border separate them

...

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

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

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

折叠边距将会发生。