CSS - Rem (Root Emphemeral Unit)

Boxdim

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'));

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'));





Discover More
CSS - Pixel (Logical Pixel)

CSS pixels are logical pixels used in CSS declarations such as width: 300px or font-size: 14px. An element with width: 300px is always exactly 300 CSS pixels wide CSS pixels are not the actual pixel...
Boxdim
CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a...
CSS - font-size property

CSS CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative...
Chrome Devtool Selector
Selector- Pseudo-selector (Pseudo-element)

Pseudo-elements are element added to selectors to be able to select a sub-content of a content element. See . They will also add an element into the flow. pseudo-class TR/2011/REC-CSS2-20110607/selector.html:first-line...



Share this page:
Follow us:
Task Runner