Skip to main content
Practice

em and rem

Besides px, you can also use em and rem to specify the length of an element.


em Unit​

em is a relative length unit used in CSS. Relative means that the length value is based on another value.

The size of an em unit is determined by the size of the parent (containing) element.

If the font size of the parent element is 16px, then 1em inside that child element would be equivalent to 16px.


Example:​

CSS
.parent {
  font-size: 16px;
}

.child {
  font-size: 2em; /* Equivalent to 32px. (16px * 2) */
}

rem Unit​

rem stands for "root em" and is a relative length unit used in CSS.

Like em, it is a relative unit, but unlike em which is relative to the size of the parent element, rem is relative to the root element (commonly the <html> element) size.

For example, if the default font size of the webpage is 16px, 1rem will be 16px anywhere on the page.


Example​

CSS
html {
  font-size: 16px;
}

.box {
  width: 10rem; /* Equivalent to 160px. (16px * 10) */
}

Summary​

  • em is determined by the size of the parent element.

  • rem is determined by the base size of the entire webpage.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.