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):

  1. normal
    Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>.
  2. <length>
    The box height is set to this length. Negative values are illegal.
  3. <Number>
    The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. The number, not the computed value, is inherited. If you specify a "raw" number for 'line-height', any unit identifiers that turn it into a length unit, then the number is inherited as a scaling factor. For example:
    body {font-size: 1em; line-height: 1.5;}
    Now the multiplier of '1.5' is inherited downward to descendant elements, and so each element's 'line-height' will be calculated as 1.5 times the value of 'font-size' for each element. This is one of the very few places in all of CSS where a raw number is permitted (the others are 'font-size-adjust' and several aural-media properties).
  4. <Percentage>
    The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.

<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.