This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.
The line-height property specifies the logical height of an inline element. This is the height used in the vertical alignment of inline elements and the construction of line boxes. It defines the height of the inline box for a given element. It determines the amount by which the height of each element's linebox is increased or decreased. Basically it can be thought of not as a set measurement, but as a calculation.
An example:
p {line-height: 18px;}
In any paragraph that contains only text, with no descendant elements of any kind, then the baselines of its lines should all be 18 pixels apart. This is the easiest case of calculating the height of each line box.
However, as soon as you start throwing in elements like images, or elements with different line-height values, or elements that have been vertically offset using vertical-align, then the picture gets crowded. Any of those things can make a line box taller than its default, and so push that baseline further away from the adjacent baselines. But nothing can make any line box smaller than 18 pixels tall-- at least the way CSS2 is written. Even if a line is nothing but a one-pixel-tall image, the line box will still be 18 pixels tall.
If the 'line-height' value is greater than the value of the 'font-size' for the element, this difference (called the "leading") is cut in half (called the "half-leading") and distributed evenly on the top and bottom of the inline box. In this manner, the content of an inline element box is centered within the line-box (assuming no 'vertical-align' property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the 'font' shorthand property.
Descendants that don't have their own value of line-height, will inherited a computed value. If they do have their own value, then it goes into effect and the inherited value is thrown out.
As described in CSS2 the line-height property takes four types of values (other than inherit):
<Length> and <percentage> values have computed values that are lengths, and therefore the computed values inherit as lengths. Therefore, they are dangerous on any element whose descendants have a different font size. <Number> and normal values have computed values that are scaling factors, and therefore inherit as scaling factors that are multiplied by the font-size when used in calculations. They are therefore safe.
The ins and outs of 'line-height' are described by in the specification, including the bits about numbers being inherited instead of computed values. If you jump over to CSS2:6.1.2, you'll see that it uses 'line-height' as an example of exceptions to the rule about inheritance of computed values.