I don't know the reason why this happens, I assume it is a legacy browser bug, but there is a great MDN article and CSS-Tricks article that has good information on this.
As others have mentioned, your primary solutions are:
margin-top or margin-bottom when spacing elements.It also seems like there are various scenarios in which margins don't collapse, such as with floated or absolutely positioned elements, but I think it's safer to use the listed suggestions every time.