css Question posted in
Some basic documentation can be found here.

in css, How come that 1rem is smaller than the root?

In this code the <a> keeps its original 30px size with the 1rem that is applied using the .a (As it should).
but the <h2> turns smaller.

why?

@import url('https://fonts.googleapis.com/css2?family=Assistant:[email protected]&family=Bellefair&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 30px;
}
.a{
  font-size:1rem;
}
a{
  font-family: Assistant;
}
h2 {
    font-family: Bellefair;
}



<h2>some text</h2>
<a href="/">some text</a>

<h2 class="a">some text</h2>
<a class="a" href="/">some text</a>
Tags:

3

Answers


  1. 0

    The browser has given h2 tags (and other tags) a font size of some rem, so that it will change size when the font size of the root element changes.

    Let’s say the browser sets the default root element font size for h2 to 1.5rem, for example. Now you change it to 1rem, so it of course gets smaller.

    Login or Signup to reply.
  2. 0

    1 rem = 16 pixels.

    In this section "h2" is 30px(that is 1.875 rem) and "a" is 16px(that is 1 rem)

    Login or Signup to reply.
  3. 0

    As you wrote correctly, 1rem is what you deffined as the size for html. But that doesn’t mean that ALL font sizes in all elements are set to that size. A lot of the other element’s font sizes will be relative to that rem size, especially those of the headers h1 to h6. So if you want the same size for h2, you need to add font-size: 1rem to your h2 rule.

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

Back To Top
Search