In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly.

Rules of Margin Collapse - posted in one of the Slack channels by Ray Wedkins.

Seems like a good read (so far - haven't finished it yet, but wanted to …