CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

This property specifies the height of an in-line element box. 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 in-line box. In this manner, the content of an in-line 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.

A few other rules govern line-height calculation:

– If the computed value for the ‘line-height’ property is less than the computed ‘font-size’ for an in-line element box, fonts may ‘bleed’ (overflow) the element box.
– If this property is set for a block-level element box that contains in-line elements, the value specifies the minimal height of each of the in-line boxes.
– For in-line element boxed, this property specifies the height of the boxes generated by the element.
– For in-line 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.

Example


div.test {
line-height: 160%;
font-size: 10pt
}


Possible Values

inherit: Explicitly sets the value of this property to that of the parent.
normal: Sets the line height to a ‘reasonable’ value relative to the element’s font face. Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2.
[number]: This number is a multiplier to determine the line height as a factor of the current element font-size. To determine the line height from the [number], multiply the current element font-size by the [number]. Child elements will inherit the multiplying factor. Negative values are not allowed.
[length]: This sets the ‘line-height’ to an explicit length value. Negative values are not allowed.
[percentage]: This number is also a multiplier (like [number]) used to determine the line height as a factor of the current element font-size. To determine the line height from the [percentage], multiply the current element computed ‘font-size’ by the [percentage]. Negative values are not allowed.