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.
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O4|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
normal
[CSS1|CSS2|CSS2.1]
[IE3|N4|O3.5|S1]
Type: Explicit
Description:
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]
[CSS1|CSS2|CSS2.1]
[IE4|N4|O3.5|S1]
Type: Explicit
Description:
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]
[CSS1|CSS2|CSS2.1]
[IE3|N4|O3.5|S1]
Type: Explicit
Description:
This sets the 'line-height' to an explicit length value. Negative values are not allowed.
[percentage]
[CSS1|CSS2|CSS2.1]
[IE3|N4|O3.5|S1]
Type: Calculated
Description:
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.
- Extra line-height amounts are applied to the tops of elements
(occurred until 4.0 Beta 1.)
- The value of "normal" is understood but the result is severely
overlapped content.
- Integer multiplier values are treated like pixel values.
- Negative values are rendered as overlapping content (negative
values should be ignored.)
- This property does not apply to form buttons (input
TYPE=button|reset|submit)
- This property applies to table elements, but not table cells (TD/TH.)
4.0+:
- The property can now apply to form buttons, affecting button height.
- This property has no effect on input TYPE=checkbox|radio and images.
- Line height for form text fields (input TYPE=password|text) can be
controlled by this property, but only the content within the field is
affected - not the field's height.
Netscape
4.x:
- Extra line-height amounts are applied to the tops of elements
- Negative values are rendered as overlapping content (negative
values should be ignored.)
- This property has no effect on inline elements, table structures,
images, list items or DD elements.
- Reported elsewhere: This property can cause unnecessary linefeeds when
printing in some cases. A reported work around is to use relative length
measures instead of absolute.
Opera
3.5:
- This property has no effect on form fields and images