Menu
A very similar question was asked here but the really answered sufficiently...
The CSS line-height property controls the amount of white space above the letters. Making it bigger/smaller spaces rows of text farther/closer together. But if you set the line height to the exact same value as the font-size, the text will still have white space above them.
So this DOESN'T quite work...
div { height: 80px; }
span { font-size : 80px; line-height : 80px; }
<div>
<span>Foo</span>
</div>
http://jsfiddle.net/s_d_p/yMHVs/
The degree to which the enclosed text actually matches the container height seems to differ from font to font.
So my question is two parts:
What are we actually adjusting when we set line-height?
Is there a way to remove it entirely so that letter fit precisely inside their container?
403
If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively. Alternatively, you can specify the “normal” keyword.
Set Font Size With Em 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
It's important to stress that line height is not the space between lines of text—as it is often mistakenly thought of—but the space from the baseline of one line of text to the baseline of the next line of text. So, a font size of 16px would require a line height of 24px or higher.
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Note that the remaining/extra space is typically a symptom of the font being used, as designated by its designer.
Thus, the 80px includes the allocated white space above and/or below. Additional white space above is typically provided to allow for accented characters, which would otherwise require the letter itself to be compressed- producing an inconsistent typeface.
See here & here for further information.
Line height refers to the total height of the typeface, inclusive of any allocated whitespace.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
