CSS - Absolute and Relative Units

Jun 3, 2026 3:00pm UTC (Check your timezone)

Theory Lab Review Quiz

Instructors: Jess, Carmen, and Eda

Absolute and Relative Units

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with Relative and Absolute Units: What Are Absolute Units in CSS, and When Should You Use Them?

Previously, we’ve used units for properties such as width, height, padding, and so on.

In CSS, we can talk about two different units:

A commonly used absolute unit is the pixel (px). 1px is standardized as “1/96th of an inch” but it may differ depending on the display size.

We can use absolute units when we want precise control of elements.

Other absolute units are:

These are mostly used for print, not for screens.

Working with Relative and Absolute Units: What Are Percentages in CSS, and When Should You Use Them?

Percentages are relative units. When we define a percentage, we define a size relative to the element’s parent. For example, here .box will take up half of its parent element:

1<div class="container">
2  <div class="box"></div>
3</div>
 1.container {
 2  width: 400px;
 3  height: 200px;
 4  background-color: lightgray;
 5}
 6
 7.box {
 8  width: 50%;
 9  height: 100%;
10  background-color: red;
11}

Percentages can be useful for creating fluid layouts that can adjust to different screen sizes.

Flexible images are one use case for using percentage values. For example, we can define max-width: 100% to an image to make sure it scales down on smaller screen sizes.

Scalable typography can be another use case. This is less common, but for example, using a percentage value for font-size will make that element’s font X% larger than its parent element.

There is also a use case for aligning an element vertically, given on the fCC lesson page:

(We’ll learn about the transform property in upcoming lessons:)

1<div class="centered"></div>
1.centered {
2  position: absolute;
3  top: 50%;
4  transform: translateY(-50%);
5  width: 300px;
6  height: 300px;
7  background-color: red;
8}

Nesting elements with percentage-based dimensions can sometimes lead to unexpected results, so we should be mindful when working with percentages.

Working with Relative and Absolute Units: What Are ems and rems in CSS, and When Should You Use Them?

Two common relative units are em and rem.

em units are relative to the font size of the parent element. rem units are relative to the font size of the root (the html) element.

The default font size for the root element is usually 16px. For example, if we use rem to define font sizes, when the user changes the font-size from their browser settings, the font-size of all the elements will scale with that change. So, using rem units instead of pixels for font sizes is good for accessibility.

A use case for em units can be defining sizes for modular components such as buttons to make sure their margins, paddings, etc., will scale proportionally with the font size, creating a more consistent design.

Working with Relative and Absolute Units: What Are vh and vw Units, and When Should You Use Them?

The vh and vw are “viewport-relative” units. They are useful for sizing elements based on the dimensions of the browser window.

vh refers to the viewport height. 1vh is 1% of the viewport’s height.

vw refers to the viewport width. 1vw is 1% of the viewport’s width.

For example, setting an element’s height to 100vh makes it span the full height of the viewport, regardless of the size of the device.

Some websites have a hero section that fills the entire window. For this, 100vh and 100vw can be used:

1<section class="hero">
2  <h1>100vh / 100vw Example</h1>
3  <p>This section fills the entire browser window.</p>
4</section>
 1body {
 2  margin: 0;
 3}
 4
 5.hero {
 6  height: 100vh;
 7  width: 100vw;
 8  background-color: #add8e6; 
 9  padding: 2em;
10}

Since vh and vw respond to changes in viewport size, when we resize our browser window, the elements sized with them also change in real time.

However, there are some things to consider:

Working with Relative and Absolute Units: What Is the calc() Function, and How Does It Work?

In CSS, we can perform calculations with the calc() function!

It’s useful for creating dynamic values.

We’ll see more of CSS functions in upcoming lessons, but let’s take a look at what a function is briefly.

Briefly defined, a function is a block of code that performs a task. We can pass arguments to the function as inputs, and we can “call” the function (usually by following the function’s name with parentheses and putting arguments inside the parentheses).

1function(arg1, arg2, ...)

The calc() function takes one argument, which is an expression. We can think of an expression as “something that produces a value.”

Inside calc(), we can use the addition (+), subtraction (-), multiplication (*), and division (/) operators in the expression if there are multiple operands (values that are operated upon).

For example:

1<div>Hello, World!</div>
1div {
2  color: white;
3  background-color: rebeccapurple;
4  width: calc(50% - 20px);
5}

Here, we subtract 20px from the half of the parent element’s width (that’s what we define with 50%).

When we resize the page, the value will be calculated automatically.

Here are some best practices when using calc():

Build an Event Flyer Page

We’ll take a look at this exercise that goes over a lot of topics we’ve learned so far!

CSS Relative and Absolute Units Review

In this section, we’ve taken a look at absolute units, relative units, and the calc() function. We’ll continue learning more CSS! Next up: pseudo-classes and pseudo-elements!