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
Ashton Jones
Front End Web Development Techdegree Student 1,389 PointsIn order to get the em equivalent for margin, do we have to divide with the font size value only?
The video states, in order to get the em equivalent value for margin we have to divide it with the value we use to get the em equivalent to font-size. My question is, does it have to be the font-size or is the property that has an em equivalent, or if there isn't do we divide it with the default px to get the em equivalent for margin?
(I stopped at this specific part, because it was quite confusing. I assume the rest of the video might clarify, but still wanted to ask.)
1 Answer
farrah
2,334 PointsHi folks -
I am following up on the above comment, because I am trying to better understand this concept as well. Full disclosure: Math does not come easily to me, so I have to work extra hard at making sense of equations, however "simple" some may deem them!
If I am understanding correctly, I will declare a font-size (in the example in the video, the font-size was translated to em units, but that is neither here nor there). THEN, for future calculations of any descendants, I will always be dividing by that previously declared font-size in pixels to arrive at the em value.
Am I on the right track? Thanks in advance for any responses!
T. Gontarek
7,030 PointsHi Farrah, That would be correct. Whatever font size is declared first is the one that you will use for your em value. If you don't choose a font size to begin with, the default browser font size will be used. For Chrome the default font size is 16 pixels, in that case you would then use 16 for your math. Do keep in mind that good designers hand all this information to you before development(code) is done. This way you know what to use.
John Johnson
11,790 PointsJohn Johnson
11,790 PointsThis part is pretty confusing. I didn't understand it the first time through either.
The 'em' value is simply "relative to the current element's font size (in pixels)"
So if the current element has a font-size of 10px, setting a property (margin-bottom, in the video example) to .5em is the same as setting that property to 5px.
The math this instructor is using is: If I know I want my margin property to be X pixels, and the font-size property is Y pixels, then X/Y gives me the em value to set for the property. I don't think this is how you would commonly use em values in the real world, but for the purposes of this course it (almost) explains it well.
The extremely confusing part is that he has defined font-size with another em value. When you give font-size an em value, then it is relative to whatever the default font-size is (usually 16px). At this point, you need to know what font-size has been redefined to in order to calculate the em value in the way he describes. However, other properties will still respond to em values as relative to the current pixel value of font-size.