Please explain the following behavior regarding CSS margin collapse.

With the following HTML+CSS:

       <style>
        .in {
            margin: 50px;
            height: 150px;
            width: 150px;
            background-color: rgba(100, 100, 50, 0.5);
        }
        .out {
            height: 300px;
            width: 300px;
            background-color: rgba(200, 200, 200, 1);
        }
        
    </style>
    ...
    <div class="out"><div class="in">This is in</div></div>

The page looks like this:

We can see that the inner div is pushed away from the top-left of the body, but the outer box is pushed only from the top of the body. Why is that?