Hi @IanBarber ,
If there is no “explicitly specified” font size in any parent, it will be based on the default font size.
You can imagine that if you didn’t specify any
font-size for that button, it would still have some “implicit” font size (I don’t know about the specific defaults in Photoshop). So, in this case, it will be
1.25 * [original font size].
Due to the cascading nature of CSS, children already (unless otherwise specified or for specific elements) inherit their parent’s font size. I find it easiest to imagine
em to be “a factor of how it would have been without that statement”…
So, to get back to your example:
1.25 em just makes it
1.25 times larger than it would be without that statement. This base value, however, to my knowledge, depends on the UI scale settings in Photoshop. If, for example, the button would have had a default font size of
14px, it would now be
1.25 * 14px).
.flex-container had specified an explicit font size (e.g.,
24px), and this gets inherited by the
1.25em would, again, mean 1.25 times the size it would have been without that statement, i.e.,
1.25 * 24px = 30px.
I hope this helps,