CSS line-height Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The line-height CSS property sets the height (also called leading) between lines of text in a block-level element such as a paragraph.
The following table summarizes the usages context and the version history of this property.
| Default value: | normal |
|---|---|
| Applies to: | All elements |
| Inherited: | Yes |
| Animatable: | Yes. See animatable properties. |
| Version: | CSS 1, 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the line-height property in action.
Example
Try this code »p {
line-height: 1.5;
}
div {
line-height: 300%;
}Warning: Percentage (%) and em values may have unexpected results. In most cases using number is the preferred way to set line-height with no unexpected results in case of inheritance. Learn more about CSS units.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
normal |
Desktop browsers use a default value of roughly 1.2, depending on the element's font-family. This is default value. |
| number | A number that will be multiplied with the element's font-size to set the line-height. |
| length | A length value in px, pt, cm, em, etc. Negative values for line-height are not allowed. |
| percentage | A percentage is used as a multiplier in the same way as a number value–the computed value for the property equals the specified percentage value of the element's font-size. |
initial |
Sets this property to its default value. |
inherit |
In case of inheritance, if number value is used for the Whereas, if percentage value is used the child elements will inherit the computed value for the property, not the specified percentage value. Again, negative values are illegal. |
Browser Compatibility
The line-height property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Text.
