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 remember it).

Some good tips:

Margin is meant to increase the distance between siblings. It is not meant to increase the gap between a child and its parent's bounding box; that's what padding is for.