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
Luis Chiappe
Courses Plus Student 10,636 PointsNested PX to Ems
If you have an "a" inside the "h1" And this "h1" has a font-size: 1.5em; the context to convert PX to Ems for <a> is this <h1> not 16px, because is inside so the context now is h1. I'm right?
4 Answers
Wayne Priestley
19,579 PointsLuis,
rem will always reference the root font size usually 16px, no matter where it is placed. Even if it is nested 3 levels down in a element with a font size of 20px, 1rem will still be 16px. The only way to change the 1rem font size is to set a new root font size.
So 1rem will always be 16px, 2rem will always be 32px and so on.
But,
1em will be 16px if used like so:
.main-page{
font-size: 1em;
}
And if used like this 1em will be 20px.
.main-page{
font-size: 20px;
}
.main-page p {
font-size: 1em;
}
Not sure if this is the exact explanation you were looking for Luis, let me know if you need more information.
Wayne Priestley
19,579 PointsHi Luis,
Not quite, the way you have it written means 1.5em would be 1.5 times the root size which is usually 16px.
Once you define a px size for an element then you can use em, i.e
If you had a element that had a font size of 20px, then that would mean 1em defined on that element, or any of its children, would be equal to 20px.
Here is a better example:
.element {
font-size: 20px;
width: 2em;
height: 2em;
}
In the example above the width would be 40px and the height would be 40px.
An em is a unit of measurement equal to the currently specified px size, if no font size has been set then like i said, the em unit is subsequently derived from that ‘root font’ setting usually 16px.
Hope this helps.
Simon Truong
2,179 PointsHey Wayne,
I was thinking of the code you wrote and the explanation i understood about the usage of em for defining sizes and I think you got it wrong.
Let me please explain my understanding :
In this case, if you set the width to 2em, it should be twice the size of the parent element of the element with the class "element". So it is not equal to 40px, except if the parent element is 20px of course.
I hope i was clear enough.
Kind Regards,
Simon
Luis Chiappe
Courses Plus Student 10,636 PointsHi Wayne, thanks for you repply. I get it, but why the value change on case that I used rem instead of em? On the browser I see differents size, and in the case that the body is the only place that you can set the font-size on pixels is the same context.
Luis Chiappe
Courses Plus Student 10,636 PointsThanks for your help Wayne!!