To answer your question about unitless line height, you might find this helpful, quoted from a post I made in another thread.
If you set line-height:1.4em on your body, it sets the line-height for the entire document to 1.4 x your body font size. Suppose you set your body to font-size: 1em, to use the visitor's default browser setting. If they have their font size set at 20px (to make the calculation easy ), then the resulting line-height is 28px. Suppose you then set font:size: 1.5em on an element. That will increase the font size to 30px, but the line-height remains at 28px, causing overlapping. You need to reset the line-height on the element itself for the line-height to apply to the new font size. i.e. 20x1.5x1.4 = 42px. Same thing applies if you set the font-size and line-height on body using % - you need to reset the line-height whenever you change the font size.
However, if you set the body line-height using a raw number with no units, then it is taken as a scaling factor, and used to scale the line-height according to the font-size of the element. So in the above example, when you set the font-size to 1.5em, resulting in 30px text, the line-height is applied as 30x1.4 = 42px. This works for any element, however deeply nested - provided, of course, you haven't over-ridden the line-height declaration elsewhere.
To me, this is counter-intuitive, as I'd expect % to be a scaling factor, but nevertheless this is how it works.