1 00:00:02,140 --> 00:00:05,980 Moving on from the font size property and units, 2 00:00:05,980 --> 00:00:09,503 we also have other properties with different units applied 3 00:00:09,503 --> 00:00:11,703 so far in our project. 4 00:00:13,090 --> 00:00:17,830 Going back to our code, into the style CSS file, 5 00:00:17,830 --> 00:00:21,390 you'll see that we have for our main header ID here, 6 00:00:21,390 --> 00:00:24,088 80 pixels, we have use pixel values 7 00:00:24,088 --> 00:00:26,653 for the padding property. 8 00:00:28,150 --> 00:00:29,080 We have 9 00:00:30,560 --> 00:00:32,500 pixels again for the margin, 10 00:00:32,500 --> 00:00:34,400 or if we scroll down a bit further, 11 00:00:34,400 --> 00:00:36,830 we have a percentage value for the width of our 12 00:00:36,830 --> 00:00:38,330 latest-product ID. 13 00:00:38,330 --> 00:00:42,460 So we have a mix of pixels and percentages at the moment, 14 00:00:42,460 --> 00:00:45,070 which is not a bad thing at all. 15 00:00:45,070 --> 00:00:49,760 But if we now also consider our newly introduced units, 16 00:00:49,760 --> 00:00:51,040 em and rem, 17 00:00:51,040 --> 00:00:55,770 how do these behave in a context which is not related to the 18 00:00:55,770 --> 00:00:56,763 font size? 19 00:00:57,760 --> 00:01:00,627 For this, we'll again scroll down to our 20 00:01:00,627 --> 00:01:05,627 food-item-content class, and the h2 element. 21 00:01:05,750 --> 00:01:08,680 And here I would like to add another property. 22 00:01:08,680 --> 00:01:09,936 Or to be more precise, 23 00:01:09,936 --> 00:01:14,470 we could actually simply use the padding that we have for 24 00:01:14,470 --> 00:01:17,570 the food-item-content here in our class. 25 00:01:17,570 --> 00:01:21,190 So basically, it's the padding we have for the text and the 26 00:01:21,190 --> 00:01:25,150 button, and see how this padding behaves 27 00:01:25,150 --> 00:01:27,793 if we apply different units to it. 28 00:01:28,810 --> 00:01:32,973 At the moment, the padding is simply set to 16 pixels. 29 00:01:34,440 --> 00:01:37,206 What if we changed this in our code, 30 00:01:37,206 --> 00:01:42,206 comment this out, and add a percentage value instead. 31 00:01:42,610 --> 00:01:46,579 Let's say the padding could be 10%. 32 00:01:46,579 --> 00:01:49,650 10% of what? Is something that we have to find out, 33 00:01:49,650 --> 00:01:51,651 but we'll do this in the next minutes. 34 00:01:51,651 --> 00:01:56,356 If we implement this and go back to our website, 35 00:01:56,356 --> 00:02:01,260 you'll see that if we select the food-item-content class, 36 00:02:01,260 --> 00:02:06,260 that the padding is now active with a value of 10%. 37 00:02:06,340 --> 00:02:07,770 And in the Computed tab, 38 00:02:07,770 --> 00:02:11,062 you can now see that this is equal to, well, 39 00:02:12,120 --> 00:02:14,710 around about 29 pixels: 40 00:02:14,710 --> 00:02:17,360 left, top, right, and bottom. 41 00:02:17,360 --> 00:02:19,507 Where is this value coming from? 42 00:02:19,507 --> 00:02:21,290 Well, as we learned, 43 00:02:21,290 --> 00:02:26,220 percentage values always depend on parent elements. 44 00:02:26,220 --> 00:02:27,053 Therefore, 45 00:02:27,053 --> 00:02:31,515 a parent element of this div here, would be the article. 46 00:02:31,515 --> 00:02:35,090 This article doesn't have a padding though, 47 00:02:35,090 --> 00:02:37,690 but it has a width of the content, 48 00:02:37,690 --> 00:02:42,670 292-293 pixels we have right here. 49 00:02:42,670 --> 00:02:46,624 Well, and turns out that 10% of this width is 50 00:02:46,624 --> 00:02:50,640 well, pretty close to the value we have for the padding. 51 00:02:50,640 --> 00:02:55,070 And if we would quickly change the value here 52 00:02:55,070 --> 00:02:59,680 for the padding from 10% to 100%, 53 00:02:59,680 --> 00:03:01,523 it doesn't look good, 54 00:03:01,523 --> 00:03:02,730 I just want to demonstrate you one thing, 55 00:03:02,730 --> 00:03:04,860 and then go back to the Computed tab, 56 00:03:04,860 --> 00:03:08,585 then you'll see we have 292.797 for the padding 57 00:03:08,585 --> 00:03:13,585 and the article here has a width of 292.797. 58 00:03:14,460 --> 00:03:19,101 So with our 10% value in place, if I reload this quickly, 59 00:03:19,101 --> 00:03:24,100 you'll see that we are not perfectly matching this value. 60 00:03:24,100 --> 00:03:28,130 If you can select the class. So it's 292.66. 61 00:03:28,130 --> 00:03:31,120 Here we have 292.797, 62 00:03:31,120 --> 00:03:33,909 that's just some, well, internal rounding 63 00:03:33,909 --> 00:03:36,680 going on right here, but you saw that 64 00:03:36,680 --> 00:03:39,515 the padding of our element here, 65 00:03:39,515 --> 00:03:43,483 is relative to the width of the parent element. 66 00:03:44,870 --> 00:03:48,310 I'm emphasizing this because so far we saw that, 67 00:03:48,310 --> 00:03:50,950 especially between em and percentages, 68 00:03:50,950 --> 00:03:54,450 there was no difference, in the end, when applying it in a 69 00:03:54,450 --> 00:03:56,810 font size context. 70 00:03:56,810 --> 00:04:00,060 With other properties, things are different now. 71 00:04:00,060 --> 00:04:03,150 Because instead of using the percentage value, 72 00:04:03,150 --> 00:04:05,557 and we can keep in mind this 29.266, 73 00:04:07,870 --> 00:04:11,160 this value is different if you're using a different width 74 00:04:11,160 --> 00:04:14,320 for the website here, 75 00:04:14,320 --> 00:04:17,220 but keep in mind the value you have right here. 76 00:04:17,220 --> 00:04:22,220 So if we now go back and now comment out our 10% padding 77 00:04:24,720 --> 00:04:28,630 and add a padding of 0.1em, 78 00:04:28,630 --> 00:04:30,010 which should then actually 79 00:04:30,010 --> 00:04:33,193 be equal to the percentage setting that we just saw. 80 00:04:34,040 --> 00:04:36,770 Saving this and going back to the website, 81 00:04:36,770 --> 00:04:40,620 shows us an entirely different result now. 82 00:04:40,620 --> 00:04:44,100 Here we have a padding of 3.2 pixels now, 83 00:04:44,100 --> 00:04:46,560 again: left, top, right, and bottom. 84 00:04:46,560 --> 00:04:49,130 So very different from the setting we had with the 85 00:04:49,130 --> 00:04:50,273 percentage value. 86 00:04:51,340 --> 00:04:55,300 The reason for this is that in a non font size context, 87 00:04:55,300 --> 00:04:58,972 the percentage value refers to other properties. 88 00:04:58,972 --> 00:05:01,980 When using the padding percentage unit, 89 00:05:01,980 --> 00:05:04,800 it refers to the width of the parent element. 90 00:05:04,800 --> 00:05:07,825 For em, and also for rem, as we'll see in a few minutes, 91 00:05:07,825 --> 00:05:10,350 this is not the case. 92 00:05:10,350 --> 00:05:13,180 em and rem, no matter to which element 93 00:05:13,180 --> 00:05:14,703 these units might be applied, 94 00:05:14,703 --> 00:05:18,093 always refer to the font size property. 95 00:05:18,986 --> 00:05:21,800 The root element's font size property, 96 00:05:21,800 --> 00:05:23,340 in case of the rem unit. 97 00:05:23,340 --> 00:05:26,710 For the em unit, the font size, 98 00:05:26,710 --> 00:05:28,770 this calculation here is based on, 99 00:05:28,770 --> 00:05:31,996 is the font size of the element itself. 100 00:05:31,996 --> 00:05:34,750 And now this sounds a bit weird, right? 101 00:05:34,750 --> 00:05:38,600 Because we learned that when applying a specific font size 102 00:05:38,600 --> 00:05:41,820 in an em unit, it depends on the font size of the parent, 103 00:05:41,820 --> 00:05:43,023 which is totally true, 104 00:05:44,050 --> 00:05:48,010 but using the em unit on an element for a property 105 00:05:48,010 --> 00:05:49,700 different than the font size, 106 00:05:49,700 --> 00:05:54,700 then the calculation result of this em unit will be based on 107 00:05:55,230 --> 00:05:58,560 the actual element's font size. 108 00:05:58,560 --> 00:06:00,590 Now what this basically means in practice now, 109 00:06:00,590 --> 00:06:02,300 to make things simpler again: 110 00:06:02,300 --> 00:06:05,561 here we have 3.2 pixels. 111 00:06:05,561 --> 00:06:09,056 Our food-item-content class, if we check the style, 112 00:06:09,056 --> 00:06:12,800 has a font size of 200%. 113 00:06:12,800 --> 00:06:15,123 Well, and 200% of what? 114 00:06:17,280 --> 00:06:21,261 Well, 200% of the actual font size defined 115 00:06:21,261 --> 00:06:23,630 by the user in the browser, 116 00:06:23,630 --> 00:06:27,733 because no parent element has a specific font size applied. 117 00:06:28,610 --> 00:06:32,230 Therefore, if I now change this here to 22 pixels here, 118 00:06:32,230 --> 00:06:35,192 for example, then in the Computed tab 119 00:06:35,192 --> 00:06:37,412 of our food-item-content class, 120 00:06:37,412 --> 00:06:41,380 the padding now is 4.4 pixels. 121 00:06:41,380 --> 00:06:45,720 Why? Because our element has applied a font size of 122 00:06:45,720 --> 00:06:48,680 200 pixels, relative to the parent, 123 00:06:48,680 --> 00:06:51,040 which in our case here is the boot element, 124 00:06:51,040 --> 00:06:52,880 so the user's browser settings, 125 00:06:52,880 --> 00:06:57,880 200% times 22 is 44 pixels. 126 00:06:57,980 --> 00:07:01,930 And of these 44 pixels, we now calculate our padding 127 00:07:01,930 --> 00:07:06,896 with 0.1em, so 0.1 times our actual font size, 128 00:07:06,896 --> 00:07:09,310 which would be 44 pixels. 129 00:07:09,310 --> 00:07:14,310 0.1em of these, now, well, are 4.4 pixels for the padding. 130 00:07:17,620 --> 00:07:21,823 This pattern also applies for the rem unit. 131 00:07:24,409 --> 00:07:26,160 If we go back to the code 132 00:07:26,160 --> 00:07:28,603 and change to padding to 0.1rem, 133 00:07:29,520 --> 00:07:32,153 as we did it right here. Save this. 134 00:07:33,180 --> 00:07:36,396 Then the padding is 2.2 pixels, now. 135 00:07:36,396 --> 00:07:37,920 Why? 136 00:07:37,920 --> 00:07:41,480 Because for rem, the font size, that is important, 137 00:07:41,480 --> 00:07:44,490 it's not the font size of the actual element we are working 138 00:07:44,490 --> 00:07:48,316 on. So this 200% font size here is not important. 139 00:07:48,316 --> 00:07:52,820 The importance here is the font size off the root element, 140 00:07:52,820 --> 00:07:56,070 which in our case is defined in the browser. 141 00:07:56,070 --> 00:08:00,270 So here we have 0.1 times the font size in the root 142 00:08:00,270 --> 00:08:03,740 element (so 22 pixels), which means we have 143 00:08:03,740 --> 00:08:07,840 a padding of 2.2 pixels for our element. 144 00:08:07,840 --> 00:08:10,489 And if I again do changes, of course, 145 00:08:10,489 --> 00:08:12,833 the padding also adjusts according to this. 146 00:08:14,030 --> 00:08:17,030 Of course, this is not limited to the padding. 147 00:08:17,030 --> 00:08:19,360 This can also be applied for other properties 148 00:08:19,360 --> 00:08:22,460 like the width, but generally it's very important 149 00:08:22,460 --> 00:08:26,180 to understand that this is where the percentage unit 150 00:08:26,180 --> 00:08:28,240 and the em and rem units are very 151 00:08:28,240 --> 00:08:30,560 different from each other. 152 00:08:30,560 --> 00:08:31,750 So keep this in mind: 153 00:08:31,750 --> 00:08:35,109 Percentage always refers to parent elements. 154 00:08:35,109 --> 00:08:39,350 em and rem are always related to the font size, 155 00:08:39,350 --> 00:08:42,730 no matter which property the em or rem unit 156 00:08:42,730 --> 00:08:44,603 is actually applied to. 157 00:08:45,522 --> 00:08:48,680 With all these concepts in mind now, 158 00:08:48,680 --> 00:08:52,240 we can actually close our settings here and bring this 159 00:08:52,240 --> 00:08:54,973 whole page back to a full screen style. 160 00:08:57,034 --> 00:08:58,660 And now finally, 161 00:08:58,660 --> 00:09:01,653 implement our new knowledge into the project.