CSS Length Units

Relative to root font size

The rem length unit is a relative length unit where the base length is calculated from the width of the character M of the document's root element: the <html> element. We remember from the em section that all major web browsers set the font size of the <html> and <body> tag to 16px.

rem units do not have the same nesting complexity as em units since 1.0rem is the same absolute length regardless of context and depth.

Code example

Copy
<style>
#blue-box {
  width: 250px;
  height: 250px;
  background-color: blue,
  color: white;
  font-size: 1.0rem;
}

#red-box {
  background-color: red,
  color: black;
  font-size: 1.5rem;
}
</style>

<div id="blue-box">
  I am a blue box with a font size of 1.0rem == 16px
  <div id="red-box">
    I am a red box with a font size of
    1.5 rem == (1.5 x 16px = 24px)
  </div>
</div>

which produces

I am a blue box with a font size of 1.0rem == 16px

I am a red box with a font size of 1.5 rem == (1.5 x 16px = 24px)

Copy
18px

<nav>
  <ul>
    <li class="active">Home</li>
    <li>About us</li>
    <li>Pricing</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
</nav>

nav {
  font-size: 14px;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  list-style-type: none;
}

nav li {
  font-size: 0.75rem;
  padding: 0.25rem 1.0rem;
  margin: 0 0.25rem;
  border-bottom: 0.25rem solid black;
  transition: all 0.25s;
}

nav li:hover, nav li.active {
  border-color: teal;
  color: teal;
}