Unitless line-height value in CSS
The value of the line-height
property does not necessarily have to be a number in some units. You can also just write a number or a fraction. In this case, the actual value of line-height
can be found by multiplying it by the value of font-size
.
For example, font-size
is 10px
, and line-height
is 1.5
. In this case, the actual value of line-height
will be
. Well, the visible white space between the lines of text will be 10px
* 1.5
= 15px
5px
:
.
15px
- 10px
= 5px
The advantage of this method of setting line-height
is that when you change the font size, the line spacing will automatically change.
Let's look at the application of what is described using an example:
<p>
long text...
</p>
p {
font-size: 20px;
line-height: 1.5;
text-align: justify;
width: 400px;
}
:
Let the font size for paragraphs be 30px
. Set the line-height
property so that the visible white space between paragraphs is 15px
. Use the unitless value line-height
for this.