The 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;
}
:
