Explaining the collapse of margins within an element
Vertical margins of an ‘inner’ block collapse with those of its container ...
... unless a border is added:
The border can, of course, be transparent: