Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Understanding Values and Units Line Height

Posted by Katsumi Suno
Katsumi Suno
4,194 Points

Difference between 1.5 and 1.5em in terms of line-height?

Wouldn't that be the same since 1.5 multiplies with the font size the same as the em-unit does? Or am I missing something here?

6 Answers

Alexander Efremov
Alexander Efremov
15,409 Points
Alexander Efremov
Alexander Efremov
15,409 Points

From StackOverFlow, it helped me to understand the difference:

Whether you use the em unit or a pure number is a different issue. Using just a number, as in line-height: 1.2, is primarily equivalent to using the em unit, as in line-height: 1.2em. But there is the difference that when line-height is inherited, it is the pure number that gets inherited, not the computed value.

For example, if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent’s font size – which is much smaller than its own font size.

Simon Evans
Simon Evans
1,356 Points
Simon Evans
Simon Evans
1,356 Points

Katsumi, a great post and I too would like confirmation of this? What you say makes sense!

Ian Evans
PLUS
Ian Evans
Courses Plus Student 978 Points
Ian Evans
Ian Evans
Courses Plus Student 978 Points

The difference is how the inheritance works, as Alexandr said. Here's a pen demonstrating:

https://codepen.io/icevans/pen/PKNbGN

Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

I asked the same question, and I couldn't understand any of the answers posted here. So I decided to test it out myself. Using the below code, all of the line heights look the same. I tried swapping the parent div's line-height to 2 instead of 2em - same result. My conclusion? It doesn't make any difference whether you use a unitless number or an em number. The proof is in the pudding... happy to be proven wrong though!

<head>
  <link href="line-height.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
  <div id="parent">Parent font-size at 64px: <br>line-height: 2em
    <div id="childA">Child A of Parent: <br>line-height: 2
    </div>
    <div id="childB">Child B of Parent: <br>line-height: 2em
    </div>
  </div>
</body>
</html>


#parent {
  font-size: 64px;
  line-height: 2;
}
#childA {
  line-height: 2;
}
#childB {
  line-height: 2em;
}
Ian Evans
Ian Evans
Courses Plus Student 978 Points
Ian Evans
Ian Evans
Courses Plus Student 978 Points

Callum, there is a very important difference, and the proof is in the pudding: check my pen above for the pudding (I put a little button in there where you can toggle the child between united and unitless). Or, try this in your example: change the font sizes of your children to something different from the parent (32px, say):

childA, #childB {

font-size: 32px; }

You'll see that child A will have a line-height of 2 * 32px (or whatever font size you pick), while child B will have a line-height of 2 * 64px (the parent's font size).

In general, when setting a line-height, what you want to be saying is "make the line-height 2 times the font size of this element", which is what the unitless line-heights do. If you use 2em, you're saying "make the line-height 2 times the font-size of the parent", which is almost never you want from a typography perspective.

Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

Hi Ian,

Thanks for your reply, I tried to reply directly to your comment but it wouldn't allow me to. Anyway...

I had a look at the Codepen you posted but couldn't work it out so, sticking with the basic example below:

The parent element is set at font-size: 64px, and line-height: 2em. The child elements are both set at font-size: 32px, as per your suggestion. One is set at line-height: 2, and the other at line-height: 2em. They both display exactly the same. I tried switching the parent element to line-height: 2, but no difference. Am I missing something?

<head>
  <link href="line-height.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
  <div id="parent">Parent font-size at 64px: <br>line-height: 2em
    <div id="childA">Child A of Parent: <br>line-height: 2
    </div>
    <div id="childB">Child B of Parent: <br>line-height: 2em
    </div>
  </div>
</body>
</html>

#parent {
  font-size: 64px;
  line-height: 2em;
}
#childA {
  line-height: 2;
}
#childB {
  line-height: 2em;
}
#childA, #childB {
  font-size: 32px;
}
Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

Hi Ian,

Thanks for your reply again, and I get it now! It seems so obvious now that I know.

So, simply put, an inherited unitless line-height will re-calculate against it's own font-size, and an inherited line-height of #em will not change. That is to say, the exact same line-height of the parent element will also be applied to the child element, which is problematic if the font-size of the child element does change.

Ian Evans
PLUS
Ian Evans
Courses Plus Student 978 Points
Ian Evans
Ian Evans
Courses Plus Student 978 Points

Hi Callum,

Sorry, I was tired when I replied to you and not thinking clearly. The issue is not the line-height set on the children, but how it's set on the parent. Sticking with your example, if we take away the line-height setting on the children, we can see the difference. Compare:

#parent {
  font-size: 16px;
  line-height: 2em;
}

#childA, #childB {
  font-size: 48px;
}

With this:

#parent {
  font-size: 16px;
  line-height: 2;
}

#childA, #childB {
  font-size: 48px;
}

You'll see that in the first case, the children inherit the line-height of 2 * parent element font-size, while in the second example they inherit the unitless line-height of 2 * their own font-size. We don't need two children to see this, we need two parents. Here's a pen based on your example that shows the difference:

https://codepen.io/icevans/pen/oeaGXO?editors=1100

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

The first 1.5 has no unit, so it is impossible to answer your question. The common units I see are %, px, em, and rem. Each has a different reference point. % is of the size of the parent. px is a set unit of measure. em is a relative unit in relation to the parent font size. rem is a relational unit to the root, usually the html element.

The thing to remember about em is that it multiplies. In a nest of elements that all use em, 2em in the first is different than 2em in the last.

But, to answer your question we need more information. Is it 1.5em, rem, %, or px? Is it vanilla CSS or are you using Sass? If you are using Sass, are you using a formula? If so, what is your formula?

Katsumi Suno
Katsumi Suno
4,194 Points

Actually I was reffering to Guils video where he used a unitless multiplier for line-height, so it really was 1.5 without a unit :) But I think, I figured it out: em multiplies with the parents font-size while a unitless value multiplies with the font-size of the current element. Can anyone confirm this?