How does rem differ from em in CSS?

In website source, I have sometimes seen developers use the rem unit. Is it similar to em? I tried it to see what it actually does, but what is it relative to?

Demo

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs are relative to their parent's font size

REMs are relative to a base font-size

This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.

The unit rem (root em) stands for the font size of the root element. In an HTML document, the root element is the html element.

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

em gives the ability to control an area of a design. As in, scale the type in that specific area relatively. rem gives the ability to scale type across the entire page easily.

Basically em is relative to the nearest parent in CSS, while is rem is relative to the parent of the page which is usually the html tag...

You see the difference clearly if you run the css below and how the parent is effecting it:

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

Summary:

• rem : a CSS unit which is relative to the font size of the html element.
• em : a CSS unit which is relative to the font size of the parent element.

Example:

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

In the above example the green square is 160px by 160 px (unless you don't have browser default at 16px). This is because the browser default of the html element font-size is 16px and 10rem * 16px = 160.

The inside square is 10em big. Because its parent element is 5px the square is 5em * 10px = 50px.

How is this usefull:

By setting all units to rem have the following advantages:

• We can scale our whole application with one CSS media query, in this media query we can specify the font size. By altering the font size all the elements which have the unit rem will scale accordingly.
• When users are not using the default browser font-size of 16px our application will scale with the selected font size of the user.

Here is an example. divs sized with rem change as we change the font-size of the html element. Whereas those sized with em only change as we change the font-size of the div.

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

In em relative unit the font size is measured on the base of nearest parent font size but if the font size is not defined for any of parent elements then by default font size will be defined according to the root html element

The rem relative unit is calculated only by root html element, thus, the font size of the parent element does not affect it

Just some example CSS to show how rem will work, notice the root font-size is set using px via html tag

html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }

And the corresponding HTML:

<div>
  <p>Lorem Ipsum</p>
</div>

Because the <p> tag is set to 1rem it ignores the parent div’s font-size of 18px. However, if we instead set the font-size to 1em, the paragraph would inherit the 18px font-size of its parent element. I know this example isn’t particularly useful, but hopefully it can help illustrate the difference between em and rem.

em and rem are font-based relative units and it's different to use ems for fonts or for length, so both ems and rems are font-based but the difference between them is that ems use the parent or the current element as a reference while rems use the root font size as the reference.

If we want to use ems for font-sizes then the reference is simply the parents computed font-size similar to what happens with percentages.

In the bellow example, a three em font-size on the header child element results in 72 pixels simply because that's three times parent font size which is (150/100)*16=24px. Now for length, it's just a bit different. The 2em padding on the header, since it's a length measurement, uses the font size of the current element as a reference and we already know that's 24 pixels, so 2em will result in 48-pixel padding, got it? It's a subtle difference, but an important one. When you use em if it's for fonts the reference is the parent and for length, the reference is the current element.

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

About the rem, it actually works the same way for both font sizes and lengths because it always just uses the root font size as a reference. This means that the 10 rem padding that we have here will result in 160 pixels because the root font size is 16.

CSS measuring units: em, rem both relative to their parents front size. The size will change depending on its Parents font size. Example:
rem : 100% of the Root Element font size.
em : 100% of the Parent font size.

EM is relative to the font-size of its direct or nearest parent, and REM is only relative to the html (root) font-size.

The main problem comes in using the 'em' and 'rem' when there is a parent font size.... **Here is the example: suppose I want the font size of 2em for body of my website so we include 2em font size in body which is known as parent font size ... and again for my H1 i want a size of 5.6 something and after we hit save and head back to our website and refresh then we will notice that our H1 has now become more than 5.6 . this happens because the fonts gets inherited and added on top of whatever it got from its parent....(this problems are going to be happened when we are using em and percentages) so, to get out of this type of problems the programmers use rem.