A box specified with 1em for width,
height, and line-height. The font-size is
60px. line-height values of 1em ...
... 60px ...
... and 100% all have exactly the same computed value: 60px
A line-height of 120px causes overflow when the height remains at 60px
Extending the height to 120px, but keeping line-height at 60px results in a ‘double-height’ box, with content ‘top aligned’
Whilst setting both line-height and height to 120px creates a ‘double-height’ box, with content vertically aligned to the center
The default line-height value
is ‘normal’, which may be interpreted in several different ways, depending upon browser, font face, and font size. The spec suggests anything between 1.0 and 1.2, although ...
... text displayed with a line-height of
1.0 is pretty uncomfortable to read, particularly over several long lines ...
... and a value of 1.2 is just about at the lowest point of readable ...
... so some recommend a value of 1.5 (or, effectively one-and-a-half line spacing) for main content paragraphs.