2.3 The Effect of Inheritance on `em` Units
The most significant characteristic of
em units is the way inheritance from one element to the next affects its sizing. In this lesson we’ll eliminate a myth of
em inheritance, and look at how it really works.
1.Introduction1 lesson, 00:49
2.Understanding Units of Measurement in CSS5 lessons, 56:08
3.Conclusion1 lesson, 02:02
2.3 The Effect of Inheritance on `em` Units
Hey, welcome back to a visual guide to And REM units. In this lesson we're gonna go into detail on how the effective inheritance of font sizes from one element to the next can affect your Units. When you're deciding whether or not you want to use Units this is probably the most significant thing that you have to bear in mind to make sure that you use Units in a way that' gonna be predictable and give you exactly the kind of layout that you are wanting to produce. So we just need to do a little bit of setup before we can move into the topics that we're covering here. We still have our blue REM box from the last lesson. So, first up, just delete that box and then we're going to add some text inside our inbox so that you can more clearly see what's happening with the text size that's being applied to this element. So, make sure you have the inbox selected, then hit the plus button on the left here and choose a text block. Double-click inside it and then just replace all that text with just e-m. And then scroll down on the right here and give it a white color. And they were also just gonna center the text. Now we wanna put a bit of spacing around this text. So we're gonna do that by adding some padding on the inside of our inbox. All right now our textbox is filling up that whole space. So it's a little difficult to select. So what we can do is click on the textbox and then on the left here, if you click this little thing, it's gonna expand and give you access to all of the parent elements too. And from there, you can select the inbox. Now, we're gonna add some padding in, and we're gonna use values on the padding, too. So in here, we're just gonna add one for top padding, and then we're just gonna add that same value all the way around on all four sides, so that we have one m of padding across the board. Now the way that inheritance works is if an element doesn't have an explicit value set for a particular CSS property, then it's gonna inherit that value from the nearest parent element that does have a value set. In the last lesson, we set the font size for our inbox to 30 pixels, we set that explicitly. So because that font size is set, this element is not going to inherit a font size from any of its parents. So then what happens if there is no font size explicitly set on an element that's using values? But before we can go through and check that out, there's one little thing we have to tweak. When you start a new project in Web Flow, it puts some default values on the body tag for you. And this just happens automatically, whether you would like to have them there or not. So what we wanna do is just change those settings so that it behaves more like you'll experience with a fresh project where you're coding everything from scratch. So just click anywhere on the white section here to select the body tag. And then if we look down in the topography section here you can see that it says 14 pixels, we already know from looking at the computed code on the HTML element that the font size there is 16 pixels and not 14 pixels. So this 14 pixels here is coming from Web Flow itself. So to get rid of that, all we're gonna do for now is just put in 16 pixels. That's just gonna make it behave as though we're automatically inheriting the font size from the HTML tag, as you would experience in a difficult project. Now let's go back to our box and see what happens if we remove the explicit declaration of a font size. And as we do this, keep an eye on the color of this little AA icon on the left here. So delete what's in here and press Enter. And then did you see how that went from blue to yellow? What that indicates in Web Flow is it this value is now being inherited. So yellow indicates being inherited, blue indicate something is being set specifically on that element. So now it's showing us that this value of 16 pixels is being inherited. And in this case, it's gone up the chain. We have a wrapper element around our inbox but we haven't set the font size on that wrapper element. So there's nothing to inherit from there. So then in the next level up the chain, on our body element, we do have a value set of 16 pixels. So now that has been inherited by our box, so that chain of priority goes from parent to parent to parent to parent. And as soon as an explicit font size is found, that font size is gonna apply to all the children of that element. So in our case, there's an explicit font size set on the body element that's being inherited by the wrapper element. And then in turn that is being inherited by the box element. And then on the box it's controlling the size of the text that we have in there. And it's also controlling the width which we have set in values. And it's controlling the padding. So if we have a look here in our computed tab, we can see that the padding around the inside of our box is being set to 16 pixels on all sides. And that's coming from our one end padding value. Okay, now before we move on let's just quickly go up and change the width of our box to 10. We're gonna be scaling these box fairly large so that it will just give us a little bit more rigor room. So now that we don't have any font size explicitly set on our box and we have our em-based layer here, any one of the parents of this element can affect the way that its layout is computed into pixels. So right now, the font size box is coming from the body element. So click anywhere in the white space you can to select it. Now let's see what happens if we change the font size on the body element. So we're gonna bump that up to 30 pixels, and then now we can see the size of the entire box, its width and its padding as well as the text inside it have all increased. If we look in the Computer tab in our Google developer tools we can see that we've got 30 pixels of padding all the way around now. So that's being computed from our 1 padding value, and we can also see from this that we have a total width of 300 pixels. And that is coming from our width of 10 multiplied by the body font size of 30 pixels. But we also have another parent that is in between our box and our body element. And that is our wrapper element. Right now, that wrapper element is inheriting its font size from the body element as well. But what happens if we start to mess with the font size on the wrapper element? So go ahead and select the rep element in Web Flow, remember if you have any difficulties selecting it you can expand this box here or you can go into this tab on the right and you can directly select the element that you're trying to select. Now what we're gonna do is set the font size of this wrapper element to 2 and keep an eye on what happens here. Just like that, the entire box has doubled in size. So, why did that happen? You already know that when you take an value, you multiply the font size of the element that that value is used on. The font size of the wrapper element was 30 pixels just like on the body element. But when we added 2 as the new font size, we double that amount. So now, as we can see in the computed tab for the wrapper element, the font size on the wrapper element is now 60 pixels. So now instead of our box just inheriting that value from the body element, it's inheriting from its nearest parent the wrapper element, which has a font size of 60 pixels. So you can see how that value is cascading down through each one of these elements and multiplying in size as it goes. You started with 30 pixels on the body element then you multiplied it by 2 on the wrapper element to end up with 60 pixels being inherited by the box. So now we have that 60 pixels being multiplied by 10 to give us a width of 600 pixels in total, but the multiplication of values doesn't even have to stop there. Now if we set an value as a font size on our box, it will multiply even more. If we change that from the 2 that it's inherited from its parent up to 3 now what was 60 pixels is being multiplied by another 3 times. Meaning that our box now has a font size of 180 pixels. So you can see from all of that that if you don't keep track of exactly what is happening with the em units, then things can get out of control very quickly. That's just in the space of two elements and three font values. In a complex design, if you overuse values, you can easily run into trouble. Now the point about values that's really important is to understand that the way they work is by basing the multiplication on the exact element that the value is used on. The reason I want to make a real point of this is, you pretty commonly see articles around the internet telling you that the way that values are computed depends on the parent element. That is not true. You just saw that when we change the font size on our box from 2 to 3 the whole thing scaled up again. Now that wouldn't happen if values depended on the parent element. Values only depend on the parent element if there is no font size set on the element itself and the only reason that that parent font size takes effect is because of inheritance. It could be the grandparent element or it could be the one above that or the one above that. But ultimately it is the font size on the element itself that matters. And one of the reasons that that is important is that if you are running into trouble with the values where you've just got something scaling off the charts. And all you have to do to fix it is set an explicit font size on the element that's a problem. As long as you set that value as a rem value or a pixel value, then any other scaling issues you've got will immediately be cut off because you no longer have a big long chain of inheritance throwing your values out. All right, before we move onto the next lesson, we're just gonna do a little bit of cleanup here. We're just going to get our inbox back to its sort of default state. We'll delete this 3 value. So we're just going in with the inherited value then we're gonna select the wrapper and we'll change its font size also back to the inherited value just delete what's in there and hit Enter and then select the body element and for this one we're going to send it to one rem so we know that is always matching the HTML element's font size. And the reason we're doing that is because in the next lesson, we're gonna take another look at the HTML element font size. This time, we're gonna be going into how browser settings affect the HTML element font size. We already know that rem units are only influenced by the root element font size. We know that units can be affected by the root element font size if they're inheriting that font size but inheritance also affects the HTML font size itself. But there's only one place that the HTML element can inherit a font size from, and that is the browser settings. So we're gonna look at how those browser settings can affect your HTML elements, and why that matters when you're choosing which units you want to use in your designs. So I'll see you in the next lesson.