The following margins will collapse because...

"In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin."
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Collapsed margin
Collapsed margin
Collapsed margin

The following margins will collapse because...

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

Collapsed margin
Collapsed margin
Collapsed margin
Collapsed margin

The following margins won't collapse because...

There is a border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or a border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

Margin
Margin
Margin
Margin