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
Gergo Fozo
Courses Plus Student 1,166 PointsWhat's the difference between em and %?
If I set the paragraph font-size to 2em, that's 32px, if I set it to 200%, that's 32px, then what's the difference between these two?
4 Answers
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsThey are, in theory, identical. They both scale from a base font size. So if you base font size is 16px (body { font-size=16px } ) then 1em would equal 16px and 100% would equal 16px. I have heard of some issues about scalling when using em though. For instance if you have your base font set to 1em ( which takes the browsers defualt font size ) then if the user changes the browser text size the font size tends to over scale in each direction.
Gerard Weppler
4,357 Points1 em = 100%, 2em = 200%, 1.4em = 140% and so on.
1em means equal to the actual font size, 2em is 2 times the font size.
ems are mainly used for browser performance.
Gergo Fozo
Courses Plus Student 1,166 PointsThank you guys
Michael Dunayevski
5,358 Pointsdont forget about the rem unit, which is relative to the root selector font size
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsVery true. I almost forgot about that one. I don't seem to use it very much, but maybe I should.