nocluenoob
nocluenoob
Programming language:CSS
2021-05-05 01:53:37
0
Q:

rem vs em

Emma
Emma
Code: CSS
2021-01-18 15:24:19 
em -> is relative to the font-size of its direct or nearest parent 
rem -> is relative to the html (root) font-size
1
user97275
user97275
Code: CSS
2021-06-26 02:53:45 
1EM or 1REM (r = root em)
The difference is inheritance.
The Rem value is based on the root element (html).
What is meant here is the font size for html and not the font size for the documet body.
... Em is based on the font size of each
Parent element.
1
Ronikos
Ronikos
Code: CSS
2021-04-13 09:48:30 
Explanation: If you run these code you understand differences between rem vs em
In this example, font-size of first h1 is 48px (nearest parent) and font-size 
of second h1 is 32px ( parent of page which is html)
<style>
  html {
    font-size: 32px;
  }
  .font {
    font-size: 48px;
  }
  .em {
    font-size: 1em;
  }
  .rem {
    font-size: 1rem;
  }
</style>
<body>
  <div class="font">
    <h1 class="em">Hey guys!</h1>
  </div>
  <div class="font">
    <h1 class="rem">Hey guys!</h1>
  </div>
</body>
-1

Related

New to Communities?

Join the community