# line-height property

The `line-height` property sets a distance between lines of text (line spacing).

The property does not set the space between lines of text, as it might seem, it sets the height of a text line. This means that the actual spacing between lines will be calculated as follows: `line-height` - `font-size` = distance between lines of text. Or vice versa `line-height` = `font-size` + distance between text lines.

## Syntax

`selector { line-height: value; }`

## Values

The property value is any size units. When specifying a value in %, the line spacing will be a percentage of font size.

In addition, you can set the value to any number greater than zero. In this case, it is perceived as a multiplier of the font size. For example, if `font-size` has a value of `20px`, and `line-height` has a value of `1.5`, then it’s the same what to write line-height: 30px (20px * 1.5 = 30px).

By default, the property has the `normal` value, in this case the browser selects the line spacing automatically.

## Example

In this example, the distance between lines of text will be `line-height` - `font-size` = 38px - 18px = 20px:

`<p> some text... </p>` `p { font-size: 18px; line-height: 35px; text-align: justify; }`

:

## Example

Let's reduce the gap to `25px` - `18px` = `7px`:

`<p> some text... </p>` `p { font-size: 18px; line-height: 25px; text-align: justify; }`

:

## Example

In this example, the distance between lines of text will be `line-height` - `font-size` = `18px` - `18px` = `0px` - the lines will almost stick together (the tails of the letters in the top line will touch the tails of the letters in the bottom):

`<p> some text... </p>` `p { font-size: 18px; line-height: 18px; text-align: justify; }`

:

## Example

In this example, the `line-height` value is a multiplier of `1.5` font size. Therefore `line-height` will be equivalent to `font-size` * 1.5 = `18px` * 1.5 = `27px`. And the real distance between the lines will be `line-height` - `font-size` = `27px` - `18px` = `9px`:

`<p> some text... </p>` `p { font-size: 18px; line-height: 1.5; text-align: justify; }`

:

## Example

Let's increase the multiplier:

`<p> some text... </p>` `p { font-size: 18px; line-height: 2.5; text-align: justify; }`

:

## Example

If you make `line-height` less than `font-size`, then the lines will at all overlap each other:

`<p> some text... </p>` `p { font-size: 18px; line-height: 13px; text-align: justify; }`

:

← →
↑
en ru