If you're learning CSS, you've probably encountered code like this:

font-size: 16px;

width: 50%;

padding: 1rem;

height: 100vh;

And perhaps you've wondered:

Why are there so many different units?

Why can't we simply use px for everything?

What's the difference between em and rem ?

What exactly are vh and vw ?

And perhaps the biggest question:

Which CSS unit should I actually use?

The good news is that you don't need to memorize every CSS unit before you can become comfortable with CSS.

Instead, focus on understanding what each unit is relative to and what problem it helps you solve.

Once you understand that idea, choosing CSS units becomes much easier.

In this beginner-friendly guide, we'll explore six commonly used CSS units:

px

%

em

rem

vh

vw

We'll look at what they mean, how they work, where they can be useful, and some common beginner mistakes.

Why Do CSS Units Matter?

Before looking at individual units, let's understand why CSS needs them in the first place.

When you're writing…