Change 495882 had a related patch set uploaded (by Ebe123; owner: Ebe123):
[mediawiki/extensions/Score@master] Add bottom margin to score images

https://gerrit.wikimedia.org/r/495882

The overlap appears be due to an overflow caused by the TimedMediaHandler player. The player is exceeding its own height and aligns to the bottom, causing the overflow to not increase its height, but instead overlap the element above it (the Score image).

TimedMediaHandler's next player based on videojs, can be seen on test2.wikipedia.org, where the overlap does not occur.

https://test2.wikipedia.org/wiki/T216305_sample

Having said that, a bit of additional margin wouldn't hurt :)

Change 495882 merged by jenkins-bot:
[mediawiki/extensions/Score@master] Add bottom margin to score images

https://gerrit.wikimedia.org/r/495882

Krinkle's image above is not what Firefox or Chrome show for me. I see the player not below but to the right of the score, slightly above. https://screenshots.firefox.com/DFTNorXXoFXr8kN1/test2.wikipedia.org

@mb Yes, that's for me as well. It depends on window width.

Just saying, the change isn't active on either testwiki right now. Wait a bit :)

@Ebe123 @Krinkle I do not think the https://gerrit.wikimedia.org/r/495882 is correct:

1. it works only with multipage scores (well, on an inlined score image the extra spacing is not expected, but if the midi player is added the spacing is still needed)
2. it adds extra space not only before the player, but also between pages (well, in most cases it does not hurt, but see below)
3. the space is in em (current context font-size dependant). And this can sometimes give unexpcted results.

I would suggest the extra space to be in px, added only after the last page and only if the player is present.
Maybe just put the player into an extra div with non-zero margin-top?