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 Em Units

Posted by Andrei Li
Andrei Li
34,475 Points

What happens if I resize browser windows? My guess, all em will be decreased proportionally. Or it's gonna be the same?

Finally, if I use for <body> 1,5em, then for <h1> 2em, then for paragraph <p> 1,5em. In px would it be that final outcome (my <p>) would be 16*1,5*2*1,5px?

2 Answers

Emre Karakuz
Emre Karakuz
9,162 Points
Emre Karakuz
Emre Karakuz
9,162 Points

Look at this code example :

<body>   <!-- Consider that its font-size is set to 1.5em -->
     <h1>Header</h1>    <!-- Consider that its font-size is set to 2em -->

    <p>A paragraph explains smthng...</p>   <!-- Consider that its font-size is set to 1,5em --> 
</body>

to find font-size of the <p>tags, multiply its own size property with its parent elements font-size.

<p> tags have 1,5em, its parent <body> has 1.5em ; font-size of <p> : 1,5em*(1,5em) = 2,25em (36 pixels)

for <h1>

<h1> has 2 em, its parent <body> has 1,5em ; font-size of <h1> : 2em*(1,5em) = 3em (48 pixels)

Andrei Li
Andrei Li
34,475 Points
Andrei Li
Andrei Li
34,475 Points

Very useful, Thanks.