Why is an element’s line-height (in pixels) affected by its parent’s font-size?

Question

See this example:

http://codepen.io/tomsoderlund/pen/JYJpPR

Try dragging the slider, which affects the font-size on the canvas element. But why does the line-height on the green boxes change? The line height is set in pixels.

Answer 1

The <span>s are inline elements. Those are not affected by line-height as you wish.

replace the <span>s with <div>s or set CSS to display: block

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 element, line-height has no effect.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height