Children of nested <li>-elements have wrong font-size?

MDN Learn
#1

In the example “Exploring an example” from : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths the element has a size of 16px.

em means “my parent element’s font-size”.

.ems li {
font-size: 1.3em;
}

This should mean that all <li> elements inside the <ul> with “ems” class should have 16px1.3=20.8px, but this is not the case. It’s 24.96px.

image
image981×1039 90.6 KB

The following <li> elements have the correct value: 24.961.3 = 32.448
image
image977×1034 88.8 KB

32.448 * 1.3 = 42.1824
image
image971×600 65.5 KB

But why did it start at 24.96px?
Why not 20.8 (which is 16 * 1.3)

Alternative question:

image
image837×576 12.9 KB

Wouldn’t “the parent element’s font size” technically include the

  • <body> *1.3
  • <section> *1.3
  • <ul> *1.3

same for the nested ul elements inside the third li?
“Three B” gets it’s value from the 2x *1.3 for each <li> but why not for the 2x <ul> Those are it’s parents too.

I feel like this should be super simple and I’m just overcomplicating things but I simply don’t get it right now.

#2

Hi @Sparda and welcome to the community :wave:

Let me first answer your second question.
The font size is only calculated from the direct parent. If an element doesn’t have a font-size property set itself, it inherits the font-size from its parent. For every element the font-size is computed as a pixel value. This is the value that is used to calculate the children’s sizes.
For example if you have 16px on the html element and no font-size property on the body, the body inherits the 16px from html. The same goes for the section and the ul. So the computed font-size on ul is also 16px. Then, the li has a font-size of 16px * 1.3, because it’s defined as 1.3em. A child of li would then have 20.8px as basis for their calculation (or would inherit 20.8px if nothing is defined).

Now to answer your first question, we have to look at the calculation of the li font-size. In Firefox you can see that in the “Computed” tab of the inspector:
2023-08-28_12-52

Here we can see that there’s also a relative font-size defined on the body. (Unfortunately this style isn’t visible in the example, because it’s part of the default styles for all interactive examples.)
Therefore the font size of the first li is calculated as 16px * 1.2 (body) * 1.3 (li) = 24.96px. If you explicitly set the body font-size like body { font-size: 1em }, you’ll get the 20.8px you were expecting initially.

I hope this helps. Feel free to ask more questions if something isn’t clear. :slightly_smiling_face:

Have a nice day,
Michael

PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.

#3

Hi @mikoMK, thank you for welcoming me the the community!

Your explanation is very thorough and resolved all ambiguities.

Why didn’t I think of a font-style rule applied to the <body>…
Next time I will make sure to better analyze the calculated part of dev-tools.

Thank for taking time to help and for the heads up regarding my mail address’ visibility!

Have an awesome day,
Tatli

1 Like