Why is line-height set in px affected by parent’s font-size?

I've made this example: http://codepen.io/tomsoderlund/pen/JYJpPR to demonstrate.

I’m setting the font-size (=size of 1 em) on the parent (.canvas) using:

$('.canvas').css('font-size', emSize + 'px');

Both the font-size and line-height are set in px. font-size is (correctly) not affected by the parent’s em size, but the line-height is - why is that?

line-height only applies to block level elements. You have to add display:block to your span.

On block level elements, the line-height property specifies the minimum height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. On replaced inline elements such as buttons or other input elements, line-height has no effect.

MDN line-height