Fig 1. Here the top-margin on the red is16px. It is resolved as the distance from the bottom of the black border on the yellow to the top edge of the red. The border ensures that any top-margin on the yellow (it is zero but could be more) is not collapsed with any bottom margin on the blue (it is zero but it could be more).

Had there been no border and 50px margins on both yellow and blue or on just either one, the gap would then be 50px. That is normal, easy to understand margin collapse.

Fig 2. Here the top-margin on the red is 16px again. But this time there is no border on the yellow. And it has no top margin of its own. The blue has no bottom margin again. Anyone could be excused for guessing that the result should look like in Fig 1, except for no border.

Even though the red is a child of the yellow, there is a collapse of the margin between the yellow and the red. As it happens the yellow has no top margin. But you can give it a top margin of up to 16px and nothing will change at all here. If you give the yellow 17px for a top margin you will then see a shift in the gap between the blue and the yellow. As indeed you would if you gave the red 17px and the yellow 16px. The greater amount is taken by the browser.

OK. We still have a little way to go. Somehow, the margins that are collapsed here (the 16px of the red and the zero of the yellow) need a decision by the browser. It needs to decide where to put this gap. In its collapsed state, this margin is shared by the yellow and the red. Why should the red have it? Recall the last paragraph. The situation is not changed if the yellow had the margin at top and the red had none.

Given that they share it, the gap will be assigned to the top of the whole family unit of yellow parent with red child.

But now, having been assigned, the red has no further claims to it. It has been contributed to the family unit as a whole. The red therefore has no top margin to apply and so sits at the top of its parent.