CSS Margins Collapsing

CSS Vertical Margins  of adjoining elements collapse vertically by default unless contained in a flexbox.

CSS Horizontal Margins never collapse.

It is demonstrated in the following example.

W3 Spec