Issue
I understood that 2em doubled the size of the font that the element was calculated to have. But in this case, it doesn't seem to be working like that.
(On Chrome)
Styles
<style>
p {
font-size: 24px;
}
.go-big {
font-size: 2em;
}
</style>
HTML
<p>This should be 24 px</px>
<p class="go-big">This should be 48 px?</px>
I have a working example here: https://stackblitz.com/edit/js-em-question-deborahk
Since the <p>
element style is set to 24px, I would assume that adding a class with a font-size
of 2em
would double the font size to 48px. But it instead seems to double the default font size of 16 to 32px.
Is this a bug? Or something in the way these styles are inherited?
Solution
em
means my parent's font-size (when it comes to typographical properties like fontSize
), according to the documentation.
Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
go-big
is a direct child of the body
element so it font-size:2em
indicates (2 * font-size of body).
You can test this link, where I have changed body font-size to 24px and now it correctly shows 48px (for 2em).
Answered By - Tushar Shahi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.