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.

line-height

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.

Setting line-height for an inline element will increase (or decrease) the height of the inline boxes for all of the characters in that element.
The difference is taken between the values of font-size and line-height, split in half, and each half applied to the top and bottom of the inline box to arrive at a new inline box.
- If the difference is positive, the inline box gets taller.
- If the different is negative, the inline box gets shorter.

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

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>.
<length>
The box height is set to this length. Negative values are illegal.
<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).
<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.

If the computed value for the 'line-height' property is less than the computed 'font-size' for an inline element box, fonts may 'bleed' (overflow) the element box.
If this property is set for a block-level element box that contains inline elements, the value specifies the minimal height of each of the inline boxes.
For inline element boxed, this property specifies the height of the boxes generated by the element.
For inline replaced elements the height of the element box is given by the 'height' property instead of the 'line-height' property.
If an element box contains text in more than one font-size, the 'line-height' property should be determined using the largest font-size. This helps to create consistent baselines between adjacent line boxes.

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.

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2002
Page URL: http:// www.d.umn.edu /~lcarlson/csswork/inline/line_height.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.