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.
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.
Top comments (0)