The CSS line-height property specifies the height of each line of text, either absolutely (in px) or relative to the element's font-size (with no units). It determines the spacing between lines, but not the character size, which is set by font-size.
line-height: 1.2; /* times font-size */ line-height: 20px;
The line-height property is inherited. The default normal height is calculated by the browser and is generally very readable.
Browser Support: Full.
line-height relative to font-size
The preferred way to specify line-height is to set it relative to font-size. This way it will scale gracefully when text is resized. There is one way to do it:
A line-height of 1.3 is close to the default line-height rendered by browsers, and, as you can see, it's pretty readable. It is not always equal to 1.3em or 130% as explained in the next section.
Why not ems and percentages
There's an important difference between specifying line-height with no units vs. em units and percentages. The children of an element with line-height set as a number will inherit the number and their line-height will be recalculated based on their font-size. In contrast, when line-height is set in ems or percentages what is inherited is the computed value of the parent. Parent and children have the same absolute line-height, in pixels.
Vertical aligning with line-height
Because characters are placed in the vertical middle of their line height, the property comes in handy when vertical aligning a single line of text inside a fixed-height container:
line-height will determine the height of block elements by increasing the spacing between lines. Because inline elements are in line (duh!), it changes their spacing, bot not their height, because they don't have one. The idea is, line-height doesn't really set a line height but a line spacing. Take the following:
Recommended line height?
The best line height for body text depends on many variables. However, the normal line-height rendered by browsers (close to 1.2) is considered to be okay. Some sources recommend line heights between 1.2 and 1.45 for optimal readability.
The font Property is Shorthand
The font property provides a short hand for line-height:
font: font-size/line-height font-family