Collapsing margins is an ancient property of the CSS Box Model, which I am just now comprehending. In short, with two block elements, will collapse the margins between them collapse to the greater margin. But this only applies to block elements. Floated and inline-block elements will keep margins un-collapsed.

See example on CodePen.