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

**URL:** <https://discourse.mozilla.org/t/children-of-nested-li-elements-have-wrong-font-size/122173>\
**Category:** Learn\
**Created:** [August 27, 2023, 11:41am UTC](https://discourse.mozilla.org/t/children-of-nested-li-elements-have-wrong-font-size/122173 "2023-08-27T11:41:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sparda](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@Sparda](https://discourse.mozilla.org/u/Sparda)\
**Post date:** [August 27, 2023, 11:41am UTC](https://discourse.mozilla.org/t/children-of-nested-li-elements-have-wrong-font-size/122173/1 "2023-08-27T11:41:48Z")

</div>

In the example “Exploring an example” from : [CSS values and units - Learn web development | MDN](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 16px_1.3=20.8px, but this is not the case. It’s 24.96px._

 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/f/e/fea82a0c87f5d34f45ff06ff0db68ee4a415a35f.png)  
_The following `<li>` elements have the correct value: 24.96_1.3 = 32.448  
 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/b/e/bee1d3010d9cb1e5f211ea5704bce5a36c215c96.png)  
32.448 \* 1.3 = 42.1824  
 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/a/f/af2aa278f298f1a01cd8c2e20c3a4613f5c056e3.png)  
But why did it start at 24.96px?  
Why not 20.8 (which is 16 \* 1.3)

## Alternative question:

 ![image](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/4/7/47b13feba378164e9dd3fe1d63bfdcef0640a35b.png)  
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.

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [August 28, 2023, 11:06am UTC](https://discourse.mozilla.org/t/children-of-nested-li-elements-have-wrong-font-size/122173/2 "2023-08-28T11:06:37Z")

</div>

Hi @Sparda and welcome to the community 👋

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](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/5/7/574c7020f00c1dd46e917050f5be75b890899210.png)

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.

---

<div class="post-metadata">

**Author:** ![Sparda](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@Sparda](https://discourse.mozilla.org/u/Sparda)\
**Post date:** [August 29, 2023, 8:55am UTC](https://discourse.mozilla.org/t/children-of-nested-li-elements-have-wrong-font-size/122173/3 "2023-08-29T08:55:57Z")

</div>

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