Cuidado com o margin collapse

tldr: Use margens em uma só direção, de preferência, para baixo.

Em elementos em sequência a margin-bottom do primeiro elemento e a margin-top do segundo elemento se colapsam e o menor valor é ignorado. Se você tem margin-bottom: 10px e margin-top: 5px isso não resultará em 15px de distância entre os elementos, mas sim 10px.

GIF

Resolver isso uma vez ou outra é tranquilo, mas pense em várias telas, com tabelas, listas, menus, etc.

Usando as margens sempre em uma direção você elimina esse problema e ainda facilita a manutenção e integração com outros elementos do código.

Dê uma olhada no exemplo abaixo.

Se quiser mais detalhes confira o artigo no MDN.