CSS Length Units

.element {
background: hsl(0 100% 10%);
}

Let’s talk specifically about these two little buggers. We saw how a percentage unit calculates its size by the size of something else. em and rem units are sort of the same, but they are calculated based on the relative font size of specific elements.

It’s a bit of a tightrope walk in some cases and a good reason why container queries and their units (which we’ll get to next) are becoming more popular. Check out Ahmed Shader’s article “New Viewport Units” for a comprehensive explanation about viewport units with detailed examples of the issues you may run into. You may also be interested in Sime Vidas’s “New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem” for a better understanding of how viewport units compute values.

Relative units

We’ve already discussed percentages in pretty good detail. What makes a percentage relative is that it computes to a number value based on the length of another element. So, an element that is given width: 25% in a container that is set to width: 1000px computes to width: 250px.

/* This is the browser's default font size */
html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

.parent-container {
container-type: inline-size;
}

<p>The big brown dog lazily jumped over the fence.</p>

Oh yeah, there are times when you’re going to see numbers in CSS that don’t have any unit at all — just a single integer or number without anything appended to it.

Ah, viewport units! When we say that something should be 100% wide, that means it takes up the full width of the contain it is in. That’s because a percentage unit is always relative to its nearest parent element. But a  viewport unit is always relative to the size of the viewport, or browser window. If an element has a viewport height of 100vh and a viewport width of 100vw, then it will be as tall and wide as the full browser window.

Font relative units

.element {
background: linear-gradient(
135deg, red, blue;
)
}

border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */

---

We can create our own custom units!

For output mediums that have no physical constraints on resolution (such as outputting to vector graphics), this feature must match the infinite value. For the purpose of evaluating this media feature in the range context, infinite must be treated as larger than any possible <resolution>. (That is, a query like (resolution > 1000dpi)will be true for an infinite media.)

A length is essentially a dimension, which is any integer proceeded by a unit, according to the list of types of numbers we looked at earlier. And when we talk about dimensions, we’re really talking about the physical size of an element.

Viewport relative units

Unit	Name	Relative to…
vh / vw	Viewport Height / Viewport Width	The height and width of the viewport (i.e., visible part of the screen), respectively.
vmin / vmax	Viewport Minimum / Viewport Maximum	The lesser and greater of vh and vw, respectively.
lvh / lvw	Large Viewport Height / Large Viewport Width	The height and width of the viewport when the device’s virtual keyboard or browser UI is out of view, leaving a larger amount of available space.
lvb / lvi	Large Viewport Block / Large Viewport Inline	These are the logical equivalents of lvh and lvw, indicating the block and inline directions.
svh / svw	Small Viewport Height / Small Viewport Width	The height and width of the viewport when the device’s virtual keyboard or browser UI is in view, making the amount of available space smaller.
svb / svi	Small Viewport Block / Small Viewport Inline	These are the logical equivalents of svh and svw, indicating the block and inline directions.
dvh / dvw	Dynamic Viewport Height / Dynamic Viewport Width	The height and width of the viewport accounting for the available space changing if, say, the device’s virtual keyboard or browser UI is in view.
dvb / dvi	Dynamic Viewport Block / Dynamic Viewport Inline	These are the logical equivalents of dvh and dvw, indicating the block and inline directions.
dvmin / dvmax	Dynamic Viewport Minimum / Dynamic Viewport Maximum	The lesser and greater of dvh/dvb and dvw/dvi, respectively.

See that? Go ahead and open that demo in a new window and change the width of the screen. And notice, too, how the height never changes because it’s an absolute length unit in pixels. The width, meanwhile, is fluidly resized as “50% of the available space” changes with the width of the screen.

A relative unit is extremely well-named because whatever value we use for a relative unit depends on the size of something else. Say we have an HTML element, a <div>, and we give it an absolute height value (not a relative one) of 200px.

20px * 1.5 = 30px

There’s something else that’s very important to know when working with viewport units. You know how mobile phones, like iPhone or an Android device, have virtual keyboards where you type directly on the screen? That keyboard changes the size of the viewport. That means that whenever the keyboard opens, 100vh is no longer the full height of the screen but whatever space is leftover while the keyboard is open, and the layout could get super squished as a result.

• svh is equal to the “small” viewport height, which occurs when the keyboard is open.
• lvh is equal to the “large” viewport height, which is when the keyboard is disabled and out of view.
• dvh is a happy medium between svh and lvh in that it is “dynamic” and updates its value accordingly when the keyboard is displayed or not.
• dvmin / dvmax is the greater ore lesser of dvh, respectively.

In other words, we do not need to directly change an element’s font-size when updating the font-size of other elements — it’s relative and scales with the change.

What about unit-less numbers?

.parent {
line-height: 1.5;
}

.child {
height: 3lh; /* 3 * 1.5 = 4.5 */
}

Absolute values are nice in that they are predictable. That could, however, change in some situations, particularly when it comes to zooming. If, say, a user zooms into a page using browser settings, then anything defined with an absolute value is going to increase its absolute size accordingly. So, if the font-size of a paragraph is set to 20px, the paragraph is going to be larger as the user zooms closer into the page. And because zooming is often used to make content more readable, using absolute values that retain their sizing could be a good approach for making pages more accessible by allowing users to zoom things up to a spot that more comfortable to read.

Let’s start with em units and say we have an HTML element, a <div> with a .box class, and we set its font size to 20px. That means any text inside of that element is 20px.

If you’re wondering when you might reach for the ch unit, it’s absolutely boss at establishing line lengths that are more pleasant and legible, especially for long form content like this guide you’re reading.

Resolution is how many little dots are packed into a screen — such as the screen you’re looking at right now — where more dots per inch of space improves the clarity and quality of the display. The fewer dots there are, the more pixelated and blurry the display.

Container units are designed to be used with container queries. Just as we are able to target a specific screen size with a media query, we can target the specific size of a particular element and apply styles using a container query.

See how a font size of 1.5em is larger than the 20px text? That’s because the larger text is based on the box’s font size. Behind the scenes, this is what the browser is calculating:

If you’re wondering what constitutes a “low” pitch from a “high” one, the spec explains it like this:

When to use one unit over another

.child-element {
background: rebeccapurple;
width: 100%;

@container parent (width > 30ch) {
.child-element {
background: dodgeblue;
width: 50cqi;
}
}
}

Great, now what if we decide we need additional text in the box, and give it a relative font size of 1.5em?

An absolute unit is like Bill Murray in the movie Groundhog Day: it’s always the same. In other words, whatever the number is, that’s exactly how it computes in the browser regardless of how other elements are sized.

p {
width: 10ch;
}

<div class="box">
I am 200 pixels tall and 50% wide
</div>

/* Integers */
1

/* Container units */
100cqi
50cqb

Length units are a little funny because they can technically be either an absolute unit or a relative unit. But we’re discussing them in absolute terms at the moment and will revisit them when we get further along to relative length units.

We won’t do a big ol’ deep dive into container queries here. The relevant bit is that we have CSS length units that are relative to a container’s size. For example, if we were to define a container:

The most common absolute value you’ll see is the pixel value. It’s sort of hard to define, but a pixel is the smallest building block of a graphical display, like a computer screen. And it’s based on the resolution of the screen. So, if you’re on a super high-resolution screen, a pixel will be smaller than it would be on a low-resolution screen, as the resolution can pack more pixels into a smaller amount of space for higher clarity. But look at the example below. All of the boxes are sized with pixels, so you can get a sense of how large 50px is compared to 250px.

Why would you need something like this? Well, it’s great for targeting styles to specific screens that support certain resolutions in a media query.

But note that the words themselves do not break. If the content is supposed to break after 10 characters, the browser will start the next line after a complete word instead of breaking the word into multiple lines, keeping everything easy to read.

Viewport units are great for laying out containers

In that case, go with a percentage value because percentages are relative to whatever parent element you’re in, regardless of whether or not it’s a container. This way, you can declare an element’s size as 100% to take up the full space of whatever parent element contains it.

.parent {
container: my-container / inline-size; /* Looks at width */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
.child {
flex-direction: row;
max-width: 50cqi; /* 50% of the container */
}
}

Use percentages when you’re unsure of the context

/* 👎 */
.element {
--hue: 0;

@keyframes rainbow {
from { --huw: 0; }
to { --hue: 360deg; }
}

aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies a number of columns */
flex-grow: 1; /* Allows the element to stretch in a flex layout */
grid-column-start: 4; /* Places the element on a specific grid line */
order: 2; /* Sets the order of elemnents in a flex or grid layout */
scale: 2; /* The elementis scaled up or down by a factor */
z-index: 100; /* Element is placed in a numbered layer for stacking */
zoom: 0.2; /* The element zooms in or out by a factor */

Sounds simple enough, right? Define a variable that starts at 0 and then cycles through 360 degrees at the end of an animation. But this doesn’t work:

<div class="box">
I am 200 pixels tall
</div>

The em and rem units we looked at earlier are prime examples of relative units that you will see all over the place. They’re incredibly handy, as we saw, because changing the font-size value of an element’s parent or the <html> element, respectively, causes the element’s own font-size value to update in accordance with the updated value.

html {
font-size: 18px; /* Inherited by all other elements */
}

.child {
font-size: 1em; /* Updates when the parent size changes */
}

Declare “zero” without units if you’d like

Got that? They’re all numbers but with nuances that make them ever-so-slightly different.

But then again, see Josh Collinsworth’s click-baity, but fantastic, post titled “Why you should never use px to set font-size in CSS” for an exhaustive explanation of how pixels behave when used to set the font-size of an element. It’s a great read to better understand the behavior and limitations of pixel units.

I say “full-page” layout because container queries are the gold standard for sizing elements according to the space they have in their container. But if we’re working with a full page of containers, this is where viewport units can be used to establish a responsive layout at a higher level.

/* 👍 */
@property --hue {
syntax: "<number>";
initial-value: 0;
inherits: true;
}

@keyframes rainbow {
from { --huw: 0; }
to { --hue: 360deg; }
}

That’s why we have the svh, lvh, and dvh units in addition to vh:

.parent {
container: my-container / inline-size; /* Looks at width */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
.child {
flex-direction: row;
max-width: 50%; /* 50% of the parent elenent */
}
}

So, what the heck is px? What’s up with this thing called rem? How are these different than other length units? The unit defines what type of number we’re dealing with, and each one does something different, giving us lots of ways to size things in CSS.

That’s what we mean when talking about computed values with relative numbers. A relative number acts sort of like a multiplier that calculates the value used to set a length based on what type of unit it is relative to. So, a value of 3rem is going to wind up becoming a different value when it is computed.

Container queries in general are so gosh-darn great for responsive layouts because they look at the size of the container and let us apply styles to its descendants when the container is a certain size.