Table of Contents

About

rem is a length unit that is based in the the font-size of the root element of the document.

To write style rules that is constant throughout the document, use the rem

rem stands for root em (ie root emphemeral unit, ie root size of M))

rem property:

  • constant throughout the document
  • is not different for each element

To give P and H1 elements the same left margin, compare this pre-2013 style sheet:

This scale is used for font and spacing

Syntax Diff

With Em 
p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }
New With rem 
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Management

Get the number of pixel for one font-size rem

The root element in a HTML document is the html element and you can see the css pixel 

var element = document.querySelector("html");
var style = window.getComputedStyle(element);
console.log(style.getPropertyValue('font-size'));
Rendered by WebCode

Demo: The number of pixel for spacing is font-size dependent

The root element in a HTML document is the html element. 

:root {
   font-size: 18px
}
#box {
   padding: 1rem;
   background-color:teal;
   color:white
}

<div id=box>
Demo: A 1 rem padding box follows the number of pixel set on the font-size
</div>

var element = document.querySelector("#box");
var style = window.getComputedStyle(element);
console.log("The box has the following padding value: "+style.getPropertyValue('padding'));
Rendered by WebCode