CSS: understanding and adjusting the height / height of a string of fonts

Question

A very similar question was asked here , but in fact he answered quite well ...

The CSS-height CSS property controls the number of spaces above letters. The more / less row spaces, the farther / closer to each other. But if you set the line height to the same value as the font size, the text will still have a space above it.

So it DOES NOT WORK ...

div { height: 80px; } span { font-size : 80px; line-height : 80px; } <div> <span>Foo</span> </div> 

http://jsfiddle.net/s_d_p/yMHVs/

The extent to which the embedded text actually matches the height of the container seems to differ from font to font.

So my question has two parts:

• What do we adjust when we set the line height?

• Is there a way to completely remove it so that the letter exactly fits into their container?

Answer 1

Please note that the remaining / extra space is usually a symptom of the font used, as indicated by its designer.

Thus, 80px includes the allocated free space above and / or below. Extra white space is usually provided to indicate accented characters that would otherwise require compression of the letter itself, creating an inconsistent font.

See here for more details.

Line height refers to the overall height of the font, including any highlighted spaces.

Answer 2

I am sure that space is reserved for some characters that require more space. like this:

Fj╛

the character "j" needs more space than "F", and I'm sure there are other characters (like "╛") that need some space above and below. therefore, the font designer reserved this space for these characters.

jsFiddle