CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

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:

line-height length | percentage | number | normal | initial | inherit

The example below shows the line-height property in action.

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 line-height property, child elements will inherit the specified value, not the resulting computed value for this property. Negative values are illegal.

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.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 3+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Text.

Related properties: font, font-size.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties