Moving on from the font size property and units,
we also have other properties with different units applied
so far in our project.
Going back to our code, into the style CSS file,
you'll see that we have for our main header ID here,
80 pixels, we have use pixel values
for the padding property.
We have
pixels again for the margin,
or if we scroll down a bit further,
we have a percentage value for the width of our
latest-product ID.
So we have a mix of pixels and percentages at the moment,
which is not a bad thing at all.
But if we now also consider our newly introduced units,
em and rem,
how do these behave in a context which is not related to the
font size?
For this, we'll again scroll down to our
food-item-content class, and the h2 element.
And here I would like to add another property.
Or to be more precise,
we could actually simply use the padding that we have for
the food-item-content here in our class.
So basically, it's the padding we have for the text and the
button, and see how this padding behaves
if we apply different units to it.
At the moment, the padding is simply set to 16 pixels.
What if we changed this in our code,
comment this out, and add a percentage value instead.
Let's say the padding could be 10%.
10% of what? Is something that we have to find out,
but we'll do this in the next minutes.
If we implement this and go back to our website,
you'll see that if we select the food-item-content class,
that the padding is now active with a value of 10%.
And in the Computed tab,
you can now see that this is equal to, well,
around about 29 pixels:
left, top, right, and bottom.
Where is this value coming from?
Well, as we learned,
percentage values always depend on parent elements.
Therefore,
a parent element of this div here, would be the article.
This article doesn't have a padding though,
but it has a width of the content,
292-293 pixels we have right here.
Well, and turns out that 10% of this width is
well, pretty close to the value we have for the padding.
And if we would quickly change the value here
for the padding from 10% to 100%,
it doesn't look good,
I just want to demonstrate you one thing,
and then go back to the Computed tab,
then you'll see we have 292.797 for the padding
and the article here has a width of 292.797.
So with our 10% value in place, if I reload this quickly,
you'll see that we are not perfectly matching this value.
If you can select the class. So it's 292.66.
Here we have 292.797,
that's just some, well, internal rounding
going on right here, but you saw that
the padding of our element here,
is relative to the width of the parent element.
I'm emphasizing this because so far we saw that,
especially between em and percentages,
there was no difference, in the end, when applying it in a
font size context.
With other properties, things are different now.
Because instead of using the percentage value,
and we can keep in mind this 29.266,
this value is different if you're using a different width
for the website here,
but keep in mind the value you have right here.
So if we now go back and now comment out our 10% padding
and add a padding of 0.1em,
which should then actually
be equal to the percentage setting that we just saw.
Saving this and going back to the website,
shows us an entirely different result now.
Here we have a padding of 3.2 pixels now,
again: left, top, right, and bottom.
So very different from the setting we had with the
percentage value.
The reason for this is that in a non font size context,
the percentage value refers to other properties.
When using the padding percentage unit,
it refers to the width of the parent element.
For em, and also for rem, as we'll see in a few minutes,
this is not the case.
em and rem, no matter to which element
these units might be applied,
always refer to the font size property.
The root element's font size property,
in case of the rem unit.
For the em unit, the font size,
this calculation here is based on,
is the font size of the element itself.
And now this sounds a bit weird, right?
Because we learned that when applying a specific font size
in an em unit, it depends on the font size of the parent,
which is totally true,
but using the em unit on an element for a property
different than the font size,
then the calculation result of this em unit will be based on
the actual element's font size.
Now what this basically means in practice now,
to make things simpler again:
here we have 3.2 pixels.
Our food-item-content class, if we check the style,
has a font size of 200%.
Well, and 200% of what?
Well, 200% of the actual font size defined
by the user in the browser,
because no parent element has a specific font size applied.
Therefore, if I now change this here to 22 pixels here,
for example, then in the Computed tab
of our food-item-content class,
the padding now is 4.4 pixels.
Why? Because our element has applied a font size of
200 pixels, relative to the parent,
which in our case here is the boot element,
so the user's browser settings,
200% times 22 is 44 pixels.
And of these 44 pixels, we now calculate our padding
with 0.1em, so 0.1 times our actual font size,
which would be 44 pixels.
0.1em of these, now, well, are 4.4 pixels for the padding.
This pattern also applies for the rem unit.
If we go back to the code
and change to padding to 0.1rem,
as we did it right here. Save this.
Then the padding is 2.2 pixels, now.
Why?
Because for rem, the font size, that is important,
it's not the font size of the actual element we are working
on. So this 200% font size here is not important.
The importance here is the font size off the root element,
which in our case is defined in the browser.
So here we have 0.1 times the font size in the root
element (so 22 pixels), which means we have
a padding of 2.2 pixels for our element.
And if I again do changes, of course,
the padding also adjusts according to this.
Of course, this is not limited to the padding.
This can also be applied for other properties
like the width, but generally it's very important
to understand that this is where the percentage unit
and the em and rem units are very
different from each other.
So keep this in mind:
Percentage always refers to parent elements.
em and rem are always related to the font size,
no matter which property the em or rem unit
is actually applied to.
With all these concepts in mind now,
we can actually close our settings here and bring this
whole page back to a full screen style.
And now finally,
implement our new knowledge into the project.