Question 183986 in Html Question posted in
Some basic documentation can be found here.

Html – Problems with font-size between the parent and the child element css

.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;
}

this is my html

<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 bigger. However, when I do the same but now in the .logo h1 selector the size its different. Note that for both cases I am putting the same font size. I don’t know what is going on.

Tags:

3

Answers


  1. 0

    The font size of an element, if not explicity specified, is inherited from its parent element. Stating this another way, changing the font size of an element can change the font size of any of its descendants.

    There are both absolute and relative units for font size. If an element has a relative font size specified, this is relative to the inherited size. Web browsers have a default style sheet which styles h1 elements with a relative font size of approximately 2em, which equates to 200% of the inherited size (the size specified for body). Of course, you can override this with a different relative or absolute font size.

    Further reading

    Login or Signup to reply.
  2. 0

    You can use your browser’s devtools inspect facility to see exactly who/where the font-sizes are being set.

    In the case that the font-size is set to 1.3rem in the parent, that is setting the em size.

    It’s child (the h1) doesn’t explicitly have a font-size set by you so it picks up the font-size set by the browser. In the case I looked at this set the font-size of an h1 to 1.5em.

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

    In the second case you have overidden the default font-size of the h1 by setting it specifically to 1.3rem – which is smaller than 1.5 * 1.3rem.

    Login or Signup to reply.
  3. 0

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search