본문으로 건너뛰기

em and rem

em and rem

In this lesson, we will learn about the em and rem units.

em Unit

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

The size of the em unit is determined by the font size of the parent element.

  • Characteristic: The value of a child element changes based on the value of the parent element.

  • Example: If the parent element's font size is 16px, then 1em within a child element would represent 16px.

Example:

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

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


rem Unit:

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

Similar to em, it is a relative unit, but instead of being relative to the font size of the parent element, rem is relative to the root element (commonly the <html> element).

  • Characteristic: It maintains a consistent size throughout the entire webpage.

  • Example: If the default font size of the entire webpage is 16px, then 1rem will represent 16px everywhere on the page.

Example

CSS
html {
font-size: 16px;
}

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


Summary:

  • em is a size that is determined by the parent element's size.

  • rem is a size that is determined by the whole webpage's base size.