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
tfurukawa
9,844 Pointsem and % padding relative to what??
I'm a little confused when we're using em and % to specify the padding. Does it become relative to the width of the element or is it relative to the font-size of the element??
thank!!
5 Answers
Derek Etnyre
20,822 Points1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
Percent is a measurement unit relative to the containing block.
tfurukawa
9,844 PointsHey Derek, Thanks for the response, but I was wondering about the padding. I read somewhere that when we specify the padding using em's, it's relative to the font-size of the element, but when we specify the padding using %, it's relative to the width of the element. Is this correct??
Thanks.
Derek Etnyre
20,822 PointsPadding using % is relative to the containing container.
mbukhonko
3,988 PointsThe em is based on the font-size of the top-most element. I think a font-size of 10px results in an em=10px of space. The default size of an em is 16px. More info: http://en.wikipedia.org/wiki/Em_(typography)
As to %, it's based on the % of the max-width of the element. So a padding-left of 20% means that it looks at the computed width of the element and gives it a padding left of 20% of the width the element takes up.
Quick example: http://cdpn.io/jwcly
Note that the padding-left of #px and #em are the same since I 48px = 3em. Play around with changing the #percent padding-left value to see that it changes based on the width of the entire window, since <p> is a block-displayed element.
tfurukawa
9,844 Pointshmm I understand the em unit but I'm still having a hard time wrapping my head around the % units.
Like in the code below, replacing padding-left of 50px with 10% will not give me the same result. In this case, will 10% be respect to the viewport width???
p { width: 500px; padding-left: 50px; }
mbukhonko
3,988 PointsWhat Derek and I said. The padding percent value is based on the width of the CONTAINER the element is in, not the element itself.
tfurukawa
9,844 Pointswow I'm an idiot. Thanks guys.