Font size issue between parent and child element CSS

Question

.logo{
width: 25%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border: 2px solid gold;
}

.logo h1{
margin-left: 1vw;
/*font-size: 1.3rem;*/
border: 2px solid red;
}

<section id="l" class="logo">
            <i class="fa-solid fa-dragon"></i>
            <h1>Blog</h1>
</section>

When I change the font size in the .logo selector, I can see that my h1 element gets larger. However, when I do the same but now in the .logo h1 selector, the sizes are different. Note that I'm using the same font size for both cases. I don't know what happened.

Answer 1

1 rem is equal to the font size of the root element. For example, if the root element's font-size is set to 16px, then 1rem is equal to 16px.

Using rem units makes it easier to create responsive designs because it allows you to set sizes relative to the root element rather than using absolute pixel values. This means that if a user changes the default font size in their browser settings, your website will still look proportionally correct.

Answer 2

You can use your browser's dev tools inspector to see exactly who/where the font size is set.

If the font-size in the parent is set to 1.3rem, the em size is set.

Its child (h1) does not explicitly set the font size you set, so it takes the font size set by the browser. In this example, I set the font size of h1 to 1.5em.

So the font-size in h1 becomes 1.5 * 1.3rem

In the second case, you override it by specifically setting the h1's default font size to 1.3rem (less than 1.5 * 1.3rem).