totn CSS

CSS: line-height property

This CSS tutorial explains how to use the CSS property called line-height with syntax and examples.

Description

The CSS line-height property defines the height used in the calculation of the line box height for an inline element, and defines the minimal height of the line box for a block level element.

Syntax

The syntax for the line-height CSS property is:

line-height: value;

Parameters or Arguments

value

The height used in the calculation of the line box height for an inline element, and the minimal height of the line box for a block level element. It can be one of the following:

Value Description
normal Normal value used by browsers
div { line-height: normal; }
number Unitless number value that is multiplied by the element's font size
div { line-height: 1.5; }
fixed Fixed value expressed in pt, em, ...
div { line-height: 12pt; }
div { line-height: 1.5em; }
percentage Percentage value
div { line-height: 150%; }
none No line-height is applied to the element
div { line-height: none; }
inherit Element will inherit the line-height from its parent element
div { line-height: inherit; }

Note

  • Percentage and em values may result in poor inheritance behavior and should probably not be used. It is preferable to use a unitless number value instead (such as 1.5).
  • When the value is provided as a percentage, it is relative to the font size of the element itself.

Browser Compatibility

The CSS line-height property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the line-height property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.

Using Normal

Let's look at how to set the line-height to normal.

div { line-height: normal; }

This would be the default value used by browsers. You might find yourself in a situation where the line-height has been changed and you wish to change it back to its default behavior.

Using Number Value

Let's look at an example where we have provided the line-height as a number value with no units.

div { line-height: 1.2; }

In this CSS line-height example, we have provided a value of 1.2. This value is a unitless number that would be multiplied by the element's font-size to calculate the line box height.

Using Fixed Value

Let's look at a CSS example where we have provided the line-height as a fixed value expressed in pixels.

div { line-height: 35px; }

In this CSS line-height example, we have set the line-height to 35px.

We can also express the line-height as a fixed value in em's.

div { line-height: 2em; }

In this example, we have set the line-height to 2em.

Using Percentage

Let's look at an example where we have provided the line-height as a percentage.

div { line-height: 125% }

In this CSS height example, we have set the line-height to 125%.