CSS Units Tutorial

In this tutorial, we’re going to learn about CSS units!

We use units (px, em, rem, percentages, vw, vh etc) to determine the size to apply to properties such as length, padding, margin & alignment.

Learning about each unit type will help you create more flexible & manageable stylesheets!

What is a CSS Unit?

A CSS unit determines the size of a property you’re setting on an element.

For example, to set the padding on a paragraph, we could choose 10px like so:

p {
  padding: 10px;
}

The value ‘10px’ includes the CSS unit ‘px’ (or pixel).

The question is: Is px the best unit to use? What about em, or rem, or vw?

Let’s find out!

Pixels

.element {   
  width: 500px;  
}

Pixels are the most common measurement unit. Allowing you to set a length in “pixels”.

Interestingly, they don’t have anything to do with the literal screen pixels of your display device. It’s a standardization of measurement used across the web.

As we’ll see, pixels lack flexibility in some scenarios & there is often a better option.

Percentages

Percentages let you specify values as a percentage, relative to the same property in the element’s parent. For example:

.parent {
  width: 600px;
}
.child {
  width: 50%;  /* 300px */
}

So if a parent element has a width of 600px, a child element with a width of 50% will render at 300px.

Font-relative units

Em

.element {
  width: 30em; 
}

em is the value assigned to the element’s font-size, so its exact value changes between elements. The measurement itself is the width of the m letter.

Note that the length changes only when you change the font-size, it won’t change if the font-family is adjusted.

By default 1em is equal to 16px.

If any CSS changes the font size, 1em becomes equivalent to whatever the new font-size is.

Rem

.element {
  width: 30rem; 
}

rem is similar to em, only instead of changing based on the font size of the current element, it changes based on the root (i.e. :root {}) element font size.

This way you can set font-size once, and `rem will be a consistent measurement throughout all pages!

ex

.element {
  width: 40ex;
}

ex is similar to em, however, it's based on the height of the x letter.

And unlike em's, it can change depending on both the font-family used & the font-size.

ch

.element {
  width: 40ch;
}

ch is like ex only instead of measuring the height of x it measures the width of 0(the number zero).

It also changes as the font-family changes.

Viewport units

vw

.element {
  width: 20vw;
}

The viewport width unit represents a percentage of the users’ viewport width.

So 50vw is equal to 50% of the width of the viewport.

It’s similar to percentage, only the value remains consistent regardless of the value held by the parent elements. Similar to the way that rem units remain relative to the root.

vw units are often used for sizing responsive type.

vh

.element {
  width: 20vh;
}

The viewport height unit represents a percentage of the users’ viewport height.

50vh equals 50% of the height of the viewport.

This is the same as vw only it’s based on height instead.

vmin

.element {
  width: 10vmin;
}

The viewport minimum is the minimum between the height or width as a percentage.

This value will be whichever is currently smaller, vw or vh.

So 20vmin is 20% of the current width or height, depending on which one is smaller.

vmax

.element {
  width: 20vmax;
}

The viewport maximum is the maximum between the height or width as a percentage.

It’s the opposite of vmin, being whichever value is currently larger, vw or vh.

So 20vmax is 20% of the current width or height, depending on which one is bigger.

Which units should I use?

You can figure out the most appropriate CSS unit by asking yourself:

• Do I want this element to scale when the viewport size changes?
• If ‘Yes’, what do I want it to scale relative to?

When you’ve answered these questions, knowing the most appropriate unit is much simpler!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!

🌎 Let's Connect

• Portfolio

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen