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.
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 lifont-size. In Firefox you can see that in the “Computed” tab of the inspector:
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.
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.