Why inner word size is more than outer

HTML-CSS
1 
html { 
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ 
} 
span { 
  font-size: 1.6em; 
}

<div>
<span>Outer <span>inner</span> outer</span>
</div>
2

Hey @shashanka,

In your CSS, you are using em. The em unit follow a rule where it scales the font-size to it’s parent, so the inner span is bigger because it is following the rule of

font-size: 1.6em; // 1.6 em of 1.6 em from it's parent span.

It’s scaling the 1.6 em to it’s parent, which is another span that has a 1.6em font-size. It is RELATIVE to the size of it’s parent.

I hope this makes sense. If it does not, don’t be afraid to ask me :slight_smile:

Here’s an MDN article for it:

3

Thank you for the clarification

1 Like
4

Glad I can help. Since the top explanation is quite messy, here’s a simple short explanation:
em is the font size of it’s parent *(multiply) by the amount that you give.

So 1.6em is parent font-size * 1.6. Hope this will clarify it better for everyone.

5

html {
font-size: 62.5%;
}
I have a doubt here,browser default size(10px) is considered as parent elment font size though it is given as 62.5%…But when we give parent font-size in pixels,the child element fontsize is parent element in pixel*em,it won’t take default browser fontsize;

IS there any thing specific that for em and rem fontsize childs, parent element shouldn’t be in percentage,if it so default browser size is considered.

6

There is indeed a difference between em and rem. As I already explained, em is relative to it’s parent. But rem is not relative to em, but it’s actually relative to the root font-size which is typically 16px. In html the root element is the <html> tag, so by changing that follows the root * rem.