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
Ryan Jin
15,337 PointsI still don't get what is the difference between rem and em
I still don't get the difference between rem and em. It says rem is related to the root. But I went to workspace and used the same value for rem and em, but the result is the same. Can somebody explain the difference?
Jonathan Cousins
4,160 PointsGregory Myers, why not make your comment an answer considering its correct and well explained?
2 Answers
Gregory Myers
21,988 PointsWith relative size properties like em and rem, they will always be sized relative to an already set font-size. The R in rem refers to the ROOT em, or the font size as found in the root of the document (which would essentially be the html element). REM is the same as em except it’s always calculated from the root font size. Changing the font size of an text element anywhere else in the document will have no effect on the size of rem.
EM, however is always is relative to the font size of its direct or nearest parent.
Basically, REM always refers back to the initial font-size of the document, where as em will calculated text size directly based on last-most-recent font-size property.
Kevin Korte
28,149 PointsThis article helped me a while ago with this question: https://css-tricks.com/rems-ems/
Gregory Myers
21,988 PointsGregory Myers
21,988 PointsWith relative size properties such as em, they will always be sized according to REM does refer to ROOT em, as it refers to em (font size) as found in the root of the document (which would essentially be the <html> element). REM is the same as em except it’s always calculated from the <html> font size. EM, however is always is relative to the font size of its direct or nearest parent. Basically, REM always refers back to the initial font-size of the document, where as em will calculated text size directly based on last-most-recent font-size property.