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:
Articles Related
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'));
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'));