Skip to content
Related Articles

Related Articles

Improve Article

How does rem differ from em in CSS ?

  • Last Updated : 23 Jul, 2021

The em and rem both are CSS font-size units that can be used in CSS document to make a specific element’s font size relative to its parents.

The em is a CSS font-size unit relative to its directly linked parent, rem is in relation with the font-size of the root element which is basically the HTML element.

There are lots of other CSS Units available as well. Let us understand the difference between em and rem with the help of a suitable example.

EM CSS Units: The em unit is relative to its parent’s size.

  • 1 em  = size of parent
  • 2 em  = twice the size of the parent
  • 0.5em = half the size of the parent

 



Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        html {
            font-size: 15px;
            font-family: 'Courier New',
                Courier, monospace;
        }
  
        #grandPArent {
            font-size: 2em;
        }
  
        #parent {
            font-size: 2em;
        }
  
        #child {
            font-size: 2em;
        }
  
        #grandChild {
            font-size: 2em;
        }
    </style>
</head>
  
<body>
    <p>Great Grand Parent - Base Font Size</p>
  
    <ul id="grandParent">
        <li>GrandParent 1</li>
        <ul id="garent">
            <li>Parent 1</li>
            <ul id="child">
                <li>Child 1</li>
                <ul id="grandChild">
                    <li>GrandChild 1</li>
                    <li>GrandChild 2</li>
                </ul>
                <li>Child 2</li>
            </ul>
            <li>Parent 2</li>
        </ul>
        <li>GrandParent 2</li>
    </ul>
</body>
  
</html>

Output: As the elements get nested into one another, the relative size of elements keeps on growing exponentially at a rate of 2x in the above example.

In this example, the child has a relative size of 2em (2x the font size of a parent) with respect to the parent which in turn is 2em (2x parent element’s parent) w.r.t. grandparent and is now 4 times the size of the grandparent.

CSS em unit

  • Base Element (GreatGrandParent)’s Size: 15px
  • GrandParent1,2 Size: 30px
  • Parent 1,2 Size: 60px
  • Child 1,2 Size: 120px
  • GrandChild 1,2: 240px

REM CSS Units: The rem unit is relative to its base root parent element’s size.

  • 1 rem  = size of root parent (HTML element)
  • 2 rem  = twice the  size of root parent (HTML element)
  • 0.5r em = half the size of root parent (HTML element)

HTML code: In this case, as the elements get nested into one another the relative size of elements remains constant as every element’s size is proportional to the root HTML element and not its direct parent and hence properties are not transferred lower down to children and grandchildren elements.

In this particular example, the parent has a relative size of 2rem (2x the font size of the root HTML element) w.r.t. root element which is the same as its child and its grandchild element and hence the size even after nesting at multiple levels remains constant.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        html {
            font-size: 15px;
            font-family: 'Courier New', Courier, monospace;
        }
  
        #grandParent {
            font-size: 2rem;
        }
  
        #parent {
            font-size: 2rem;
        }
  
        #child {
            font-size: 2rem;
        }
  
        #grandChild {
            font-size: 2rem;
        }
    </style>
</head>
  
<body>
    <p>Great Grand Parent - Base Font Size</p>
  
    <ul id="grandParent">
        <li>GrandParent 1</li>
        <ul id="garent">
            <li>Parent 1</li>
            <ul id="child">
                <li>Child 1</li>
                <ul id="grandChild">
                    <li>GrandChild 1</li>
                    <li>GrandChild 2</li>
                </ul>
                <li>Child 2</li>
            </ul>
            <li>Parent 2</li>
        </ul>
        <li>GrandParent 2</li>
    </ul>
</body>
  
</html>

Output: 

CSS rem unit

  • Base( GreatGrandParent)’s Font Size : 15px
  • GrandParent1,2/Parent1,2/Child1,2/GrandChild1,2 Font Size = 30px

Note: Please notice the output of both the above examples to know the difference.

Advantages of using rem over em:

  • While scaling our application to responsive layout using media query functionality, we can directly alter the base font-size of the root element and every child can directly scale altogether with just one media query on the root element.
  • When the user has altered the default base font-size of any browser, our application scales well in this case with the usage of CSS rem units.

Browser Support: 

BrowserChromeOperaSafariFirefoxInternet Explorer
em1.03.51.01.03.0
rem4.020.04.13.69.0

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :