Why margin of child div doesn't collapse with parent margin div

Question

I'm trying to learn when margins are collapsing.

I followed this article: What's the Deal with Margin Collapse? and still don't understand why the following margins don't collapse.

Which rule did I break?

 .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

According to the Cascading Style Sheets (CSS) - The Official Difinition from W3.ORG, they said:

Two margins are adjoining if and only if:

....

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

...

In your case, try to remove the border-style: solid; like this:

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

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

The collapsed margin will happen.