[CSS] How to specify line height with line-height?

The CSS property line-height allows you to specify the height of lines of text.

Even if you have actually used line-height, there are probably many people who say, “I just copied and pasted it somehow” or “I don’t know how it’s calculated.”

This time, for those who want to learn how to use the CSS property line-height,

I will explain according to the above items.

After reading this article, you will know how to set the line height using the line-height CSS property .

Please read to the end!

What is line-height?

line-height is a property that specifies the height of the line .

It has the effect of creating a space above and below the text to make the text easier to read.

A negative value cannot be specified for line-height.

When line-height: 1, the line height and character height (font size) are the same, and when 2, the line height is doubled.

The space is evenly spaced above and below the character, so in the case of 2, there is only 0.5 character-high space above and below.

Specifically, it is described as follows.

p {
  line-height: 1.6;
}

In the above code, a space with a height of 0.3 times the font size is created above and below the text.

There is 0.6 times the total space between the two lines.

For line-height, you can specify units such as px, em, and % in addition to unitless numbers.

As will be explained in the next section, care must be taken when using each method because the calculation methods are different.

Be careful when using line-height

Were you able to understand the basic features and how to use it?

Here, we will explain the points to note when actually using it.

what value should i use?

There are several ways to specify the value. Which method should I use?

First, let’s consider how to specify in px, such as line-height:20px.

In the case of this method, it is necessary to specify a different line-height for each font size, which is troublesome.

Unitless, em, and % are calculated relative to the font size, so you don’t have to enter random numbers considering the font size.

We recommend using the unitless method .

I’ll explain why using the following HTML code:

<div class="parent">
  <div class="child">
    <div class="grandchild">
    </div>
  </div>
</div>

For this, describe the CSS when using %.

.parent{
  font-size: 25px;
  line-height: 200%;
}
 .child{
  font-size: 20px;
}
 .grandchild{
  font-size: 15px;
}

The row height of the parent element is 200% of 25px, so 50px.

However, child and grandchild elements will inherit the value from the parent element even if the font size is different, and the line height will be 50px.

If you specify “line-height: 200%” for child and grandchild elements, it will be recalculated with each font size, but the setting will be troublesome as with px.

The value of em is inherited from the parent element as well.

Let’s specify it without units this time.

.parent{
  font-size: 25px;
  line-height: 2;
}
 .child{
  font-size: 20px;
}
 .grandchild{
  font-size: 15px;
}

If you try this, the line height will be twice as large as the font size, even though line-height is not specified for child or grandchild elements.

It is recommended to specify units without units, as it makes the code shorter and easier to maintain.

If you specify it for the p element, even if the font size is different, it will be calculated with the font size specified for that element, so the work will be much easier.

About the size of the line-height value

The value of line-height is basically about 1.5 to 2.0 .

If you make it smaller than 1.5, it will be difficult to read and the design will be spoiled.

Even if you make it larger, when the text spans multiple lines, the space will be empty and it will be difficult to read.

If you want to have space in your design, it is better to separate the elements and use margin properties such as margin.

Summary: Values ​​should be unitless

This time, I explained how to use the CSS property line-height.

It should be noted that the calculation method differs depending on the unit .

We also introduced recommendations for how to specify values.