El caso del margin-top... La verdad es que mucha gente pasa olímpicamente de saber porqué ocurre esto. Siempre se ve en muchas páginas alguna chapucilla para
arreglarlo.
El problema es principalmente que el margen superior se
colapsa.
Para prevenirlo, hay varias formas diferentes. Añadir padding, bordes, mostrar el elemento como inline-block, etc. Aunque la más limpia en mi opinión es añadir al elemento padre lo siguiente (en tu caso div):