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
Paul Barron
6,595 PointsHow Does a Nested Element Change the Context?
I get the target/context formula for ems, but I don't understand why the context changes. Can someone enlighten me as to how nested elements change the context. Or more so, what are some instances that this may occur? Thanks.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Paul,
When you use em's for font-size it's always relative to the font size of the parent. So when you nest an element inside another element it now has a different parent than it would have had if it wasn't nested.
Suppose you have the following html:
<body>
<p>This is a paragraph <a href="#">with a link</a></p>
<a href="#">The parent for this link is the body</a>
</body>
and css:
p {
font-size: .75em;
}
a {
font-size: .75em;
}
Both links here are given a font size of .75em so you might think both links would be the same size. However, they're not because the font-size is relative to the parent font-size.
The paragraph and the second link are both direct children of the body so the context for them is 16px. Their font-size would then be .75 * 16px or 12px.
The link inside the paragraph then is .75 * 12px(the font size of it's parent) which would be 9px. So by nesting that first link inside the paragraph it has changed the context for that link.
Harry Abernethy
10,007 PointsThink of it as a box in a box in a box and your context is always the relative parent.