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
Paula Mourad
5,154 PointsConfusion! Em vs Rem examples
Hey guys! I officially hate em and rem :( I want to give an example of what I understood. Am I on the right path? Thanks in advance!
Assuming this is my site:
<html>
<body>
<h1>Hello World</h1>
<h2>I'm confused</h2>
<p>I hate math.</p>
</body>
</html>
Is my math on this CSS correct regarding EM and REM?
css
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 2em * 16px=32px Is this correct? */
}
h2 {
font-size: 4rem; /* 4rem * 16px from the html root = 64px Is this correct?*/
}
h3 {
font-size: 3em; /* 3em * 4rem??? or 3em * 16px? */
}
5 Answers
Aurelian Spodarec
10,801 PointsI say it like this.
Let's get the facts right first. 1em = 16px; em is multiplayer of 2
em is a multpilaier of pixels. So 2em is 32px, 3em is 48px and so on..
You know how you have your body styles?
This is from my current project
body {
background: #f7f7f7;
color: #262626;
padding: 0;
margin: 0;
font-size: 1em;
font-family: "Roboto","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
}
See that? see font-size 1em? good.
Now, the body is 1em, which is 16px.
Say we have a container and the font-siez is set to 2em, 32px, and inside that we set the h1 to be 1em, it's going to be 30px, since it will get form it's parent.
If we say to be 1rem, it's the same thing, except that now we put an 'r' which stants the root', which is body, so it's 16px since the body font-size is 16px, in em.
Em are also better when zooming, or for mobile devices, since pixels are different, the font's will be relevant to each other when resizing.
Hope it helps.
ANYWAS the best thing to do is to look here and reffer to it's origin, to the documentation
Jesus Mendoza
23,289 PointsHey Paula,
I already gave you my answer up there, but here are a few examples:
html {
font-size: 16px;
}
/* Parent of h1.child and h1.second-child*/
div.parent {
font-size: 2em; /* 2em x 16px = 32px; */
}
/* Child of div.parent */
h1.child {
font-size: 2em; /* 2em x 32px = 64px (because the parents font-size was 2em x 16px = 32px. */
border: 2em solid tomato; /* 2em x 64px = 128px (Because its own font-size is 2em x 32px = 64px */
}
/* Child of div.parent */
h1.second-child {
font-size: 2rem; /* 2rem x 16px = 32px (Because rem is relative to the root element font-size which is 16px) */
border: 2rem solid tomato; /* 2rem x 16px = 32px (Because rem is relative to the root element font-size which is 16px) */
}
Kevin Korte
28,149 PointsThis is correct, and a good example of mixing ems and rems
Verifiable here: http://codepen.io/kevink/pen/gwLxkG
Aurelian Spodarec
10,801 Pointscool nice and clean :D
Omar Jimenez
1,446 PointsI was pulling my hair out of frustration but after reading this 10x it started to make sense. You're a life saver. Thank you.
Matt Milburn
20,786 PointsHi Paula,
I understand your frustrations with em and rem. However, you are understanding their usage correctly. One important difference is that rem references the "root font size" defined on the html element while em references a value that is relative to the nearest ancestor with font-size defined.
egaratkaoroprat
16,630 PointsHi Paula
Yes, you are correct.
For h3: If it is a direct child of <html> or <body> (given, body does not have a font-size set) it would be 3*16px.. Em refers to the size of its container (parent element), while rem refers to the root (in this case it is <html>).
I try to explain how em works: Let's say you have the following code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1 class="em">Hello</h1>
<h1 class="rem">Hello</h1>
</div>
</body>
</html>
html {
font-size: 16px;
}
div {
font-size: 20px;
}
.em {
font-size: 2em; /* 2 * 20px from div = 40px */
}
.rem {
font-size: 2rem; /* 2 * 16px from root element = 32px */
}
Hope this helps!
Paula Mourad
5,154 PointsIn your example, wouldn't it be:
.em {
font-size: 2em; /* 2 * 20px = 40px? */
}
Thanks!
egaratkaoroprat
16,630 PointsFixed it - a little tired over here. :)
Seems like you got the grasp, happy coding!
Andreas Frost Nordstrøm-Hansen
2,443 PointsI found this article, that explains something about it.
Hope it helps you.
Paula Mourad
5,154 PointsPaula Mourad
5,154 PointsGot it! :D Thanks!! I still hate em and res! LOL
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsDon't worry! I did too! You will get used to it :D Just start using it. I used to be a pixel guy, and didn't like em and rem, but it's actually not that bad, it's even better and less messy.
Jesus Mendoza
23,289 PointsJesus Mendoza
23,289 Points1em is equal to the font-size of your html/body. If your html/body font-size is 32px then 1em in the rest of your elements will be equal to 32px. Also, lets say you have a header and you set the font size to 5em, now if you try to set the border to 1em it will be equal to 5em
I'd say that em sizes depend on the font-size of the parents or element itself.
Example:
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 Points1rem is always equal to the html/body though, right? lol I just did the course few weeks ago, and just putting my knowledge here on forum :D
but you're rgiht 1em is equal to the body, but if you have a parent then it's form the parent, unless it's rem, it's alwasy going to be equal to the body
Jesus Mendoza
23,289 PointsJesus Mendoza
23,289 PointsYeah rem is equals to the root element font-size, so if the html/body font-size is 32px, 1 rem will be equal to 32px no matter the font-size of the parents or the element itself.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsI just want to be extra clear here, who says 1 em = 15px. It can be 15px, but by default it's going to be 16px, thanks to most common browsers.
Number two, if body has 1em which is equal to 15px, 1rem would also be equal to 15px, not 30px. 2rem would be 30px.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsWell, Kevin, i got my facts wrong then lol it's 16 px the default , but Guil says from 15/16 if i remember right, monstly 16px.
Yeah, I'm just vague lol and yeah i see that mistake there
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsSounds good, just wanted to clear that up. A quick here: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size if you're ever in doubt will reaffirm for you that If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px.
Jacky Chau
Full Stack JavaScript Techdegree Student 8,106 PointsJacky Chau
Full Stack JavaScript Techdegree Student 8,106 PointsAs for the third comment made by Mr. Jesus Mendoza saying that "Say we have a container and the font-siez is set to 2em, 32px, and inside that we set the h1 to be 1em, it's going to be 30px, since it will get form it's parent.", I am not sure whether 30px for h1 is correct. Or should it be 32px for h1 in this case? Btw, appreciate your input.