CSS Units Explained: A Beginner’s Guide to px, %, em, rem, vh and vw

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 CSS, you're constantly telling the browser how large or how far apart something should be.

For example:

p {
font-size: 18px;
}

You're telling the browser:

"Make this text 18 CSS pixels in size."

Or:

.container {
width: 80%;
}

You're telling the browser:

"Make this element 80% of the relevant containing block's width."

CSS units provide the reference the browser needs to calculate these values.

And different units use different references.

That's the key idea.

1. Understanding px

Let's start with one of the easiest units to understand:

px

px stands for pixel.

For example:

h1 {
font-size: 32px;
}

Here, 32px specifies a CSS length of 32 pixels.

You can also use pixels for things such as:

.card {
padding: 20px;
border-radius: 8px;
border: 1px solid black;
}

Pixels are useful when you want a specific, predictable length.

For example, a developer might use pixels for:

• Border thickness
• Small gaps
• Border radius
• Icon dimensions
• Specific spacing
• Certain fixed-size elements

However, that doesn't mean you should use px for absolutely everything.

One reason CSS has relative units is that websites often need to adapt to different screens, layouts, and user preferences.

1. Understanding %

The % unit is a relative unit.

It expresses a value as a percentage relative to another value.

For example:

.container {
width: 50%;
}

The exact reference depends on the property, but for an ordinary width, the percentage is generally calculated relative to the containing block's width.

Imagine a container that's 1000px wide.

If a child has:

width: 50%;

its width would be 500px in that simplified example.

That's useful because the child doesn't have to remain a fixed 500px wide.

Its size can change as the available space changes.

This is one reason percentages are useful for flexible layouts.

A Practical Example of %

Imagine you're building a webpage with a content area.

You could write:

.content {
width: 80%;
}

Instead of saying:

.content {
width: 800px;
}

The percentage-based version can adapt as the containing block changes.

This can be useful when building responsive layouts.

However, percentages aren't automatically the solution to every responsive-design problem.

The important thing is understanding what the percentage is relative to.

1. Understanding em

Now things become slightly more interesting.

The em unit is a relative unit associated with font size.

For example:

.parent {
font-size: 20px;
}

.child {
font-size: 2em;
}

The child's font-size is 40px in this example because 2em is calculated from the parent's computed font size.

So:

20px × 2 = 40px

This makes em useful when you want something to scale relative to typography.

But there's an important detail beginners should understand:

The reference for em depends on the property.

For font-size, em is based on the parent's computed font size.

For many other properties, such as padding and margin, em is based on the element's own computed font size.

That distinction matters.

Why Can em Sometimes Become Confusing?

Because em is relative, its value can depend on context.

Imagine several nested elements:

.parent {
font-size: 20px;
}

.child {
font-size: 1.5em;
}

.grandchild {
font-size: 1.5em;
}

The values can compound as you move deeper into the hierarchy.

That's not necessarily bad.

In fact, this behavior can be useful when designing components that should scale based on their typography.

But if you're a beginner and you're trying to create a consistent sizing system across an entire website, rem can often be easier to reason about.

Which brings us to our next unit.

1. Understanding rem

rem stands for root em.

Unlike em, which can depend on context, rem is based on the computed font size of the root element.

The root element in an HTML document is normally:

For example:

html {
font-size: 16px;
}

h1 {
font-size: 2rem;
}

Here:

2rem = 32px

because:

2 × 16px = 32px

This gives you a more predictable reference point.

Why Do Developers Like rem?

Imagine you want consistent typography throughout a website.

You could define:

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
}

p {
font-size: 1rem;
}

If the root font size is 16px, these correspond to:

• 2rem → 32px
• 1.5rem → 24px
• 1rem → 16px

The advantage is that all of these values share the same reference point.

This makes rem particularly useful for creating consistent sizing systems.

You may see rem used for:

• Font sizes
• Padding
• Margins
• Component spacing
• Buttons
• Layout dimensions

em vs rem: What's the Difference?

This is one of the most common beginner questions.

Here's a simple way to think about it:

em → relative to font-size context

rem → relative to the root element's font size

For example:

html {
font-size: 16px;
}

.parent {
font-size: 20px;
}

.child {
font-size: 2em;
}

The child becomes:

40px

because its 2em is based on the parent's 20px font size.

But:

.child {
font-size: 2rem;
}

would be:

32px

because rem refers to the root's 16px font size.

So when you're choosing between em and rem, ask:

"Do I want this value to respond to local typography, or do I want it tied to the root sizing system?"

That's much more useful than simply memorizing their definitions.

1. Understanding vh

Now let's move away from font-relative units.

vh stands for viewport height.

One vh unit represents 1% of the viewport's height.

Therefore:

100vh = 100% of the viewport height

For example:

.hero {
height: 100vh;
}

This tells the browser to make the element's height equal to the viewport height.

This can be useful for certain hero sections or full-screen layouts.

What Is the Viewport?

The viewport is essentially the visible area of the browser window available for the webpage.

Its dimensions can change depending on:

• Screen size
• Browser window size
• Device
• Orientation

So a desktop browser and a smartphone can have very different viewport dimensions.

That's why viewport units can be useful when you want an element to respond directly to the available viewport.

1. Understanding vw

vw stands for viewport width.

One vw represents 1% of the viewport's width.

So:

100vw = 100% of the viewport width

For example:

.hero {
width: 50vw;
}

This means the element's width is 50% of the viewport width.

Unlike %, which is often relative to a containing block, vw is tied directly to the viewport.

That difference is important.

% vs vw

These two units can sometimes look similar but solve different problems.

Consider:

.container {
width: 50%;
}

The percentage width is generally calculated relative to the containing block.

Now compare:

.container {
width: 50vw;
}

This is based on half of the viewport width.

So ask yourself:

"Should this size respond to its parent, or directly to the browser viewport?"

That question helps you choose between % and vw.

A Simple CSS Units Cheat Sheet

Let's put everything together.

Unit

px

Basic idea

Specific CSS length

Common use

Borders, precise spacing

Unit
%

Basic idea

Relative to another value

Common use

Flexible widths and sizes

Unit
em

Basic idea

Relative to font-size context

Common use

Scalable component typography/spacing

Unit
rem

Basic idea

Relative to root font size

Common use

Consistent typography and spacing

Unit
vh

Basic idea
Relative to viewport height

Common use

Viewport-based vertical sizing

Unit
vw

Basic idea
Relative to viewport width

Common use

Viewport-based horizontal sizing

Remember:

The goal isn't to memorize the table.

The goal is to understand the reference point behind each unit.

Which CSS Unit Should You Use?

This is where many beginners get stuck.

They ask:

"Should I always use px?"

Or:

"Are rem units better than pixels?"

There isn't one unit that is always the correct choice.

Your choice depends on the problem you're solving.

For example:

Need a specific small border?

px may make sense.

border: 1px solid;

Need a flexible width?

% may be appropriate.

width: 80%;

Need sizing that follows local typography?

em may be useful.

Need a consistent root-based scale?

rem is often a good choice.

Need sizing based on the viewport height?

Consider vh.

Need sizing based on the viewport width?

Consider vw.

The important thing is to choose intentionally.

Don't Use Units Just Because You See Other Developers Using Them

When you're learning to code, it's easy to copy code from tutorials.

You might see:

padding: 1rem;

and simply assume:

"1rem must be better than 16px."

That's not necessarily the right way to think about it.

The better question is:

"Why did the developer choose rem here?"

Perhaps they want spacing to follow the site's root sizing system.

Likewise, if you see:

width: 50vw;

don't simply conclude that vw is better than %.

Ask:

"Why should this element be relative to the viewport rather than its parent?"

Understanding the reasoning behind the code is what makes you a better developer.

Common Beginner Mistakes With CSS Units

1. Using px for Everything

Pixels are useful, but using them for every single dimension can make it harder to build flexible layouts.

Learn how relative units work so you can choose appropriately.

1. Thinking em and rem Are the Same

They're both relative, but they don't use the same reference.

Remember:

em → local font-size context

rem → root font size

1. Assuming % Always Means Percentage of the Screen

It doesn't.

For many properties, the percentage is calculated relative to a relevant containing block or another property-specific reference.

If you want a value directly tied to the viewport, viewport units may be more appropriate.

1. Using vh Without Considering Real-World Viewport Behavior

100vh can be useful, but mobile browsers have dynamic browser UI that can affect the usable viewport.

Modern CSS provides newer viewport units such as svh, lvh, and dvh for more specific viewport behavior.

You don't need to master these immediately, but it's useful to know that 100vh isn't always the complete story on mobile devices.

1. Choosing Units Without Understanding the Layout

CSS isn't about randomly choosing units until something looks right.

First understand the relationship between the elements.

Then choose a unit that expresses that relationship.

A Better Way to Learn CSS Units

Instead of memorizing:

"px means this."

"rem means that."

Try asking these questions:

What should this value be relative to?

Is it relative to:

• A specific length?
• The parent?
• The element's font size?
• The root font size?
• The viewport width?
• The viewport height?

Once you know the reference point, the appropriate unit becomes much easier to identify.

Practice With a Small Project

One of the best ways to understand CSS units is to experiment.

Create a simple card:

Learn CSS

Understanding CSS units makes layouts easier to control.

Then try different units:

.card {
width: 80%;
padding: 1rem;
border: 1px solid;
border-radius: 8px;
}

.card h2 {
font-size: 2rem;
}

.card p {
font-size: 1em;
}

Then experiment.

Change the width.

Change the root font size.

Change the padding.

Try em instead of rem.

Resize the browser.

Watch what changes.

This type of experimentation will teach you more than simply memorizing definitions.

The Bigger Lesson

Learning CSS isn't really about collecting hundreds of properties and values in your memory.

It's about understanding relationships.

When you understand that:

• px gives you a specific CSS length
• % relates a value to another relevant size
• em works relative to font-size context
• rem uses the root font size
• vh responds to viewport height
• vw responds to viewport width

you have already built a strong foundation.

And that's the important part.

You don't need to use every CSS unit in every project.

You need to understand why you would choose one unit over another.

Final Thoughts

CSS units might seem like a small topic, but they have a major impact on how you build layouts.

The difference between:

width: 50%;

and:

width: 50vw;

isn't simply different syntax.

They communicate different relationships.

Likewise, choosing:

font-size: 2em;

instead of:

font-size: 2rem;

changes what the value is relative to.

That's why learning CSS units is less about memorization and more about developing the ability to ask:

"What should this value be relative to?"

Once you start thinking that way, CSS becomes less about guessing and more about making deliberate decisions.

And that's an important step toward becoming a better frontend developer.

You don't need to memorize every CSS unit.

Understand the problem each unit solves—and choosing the right one becomes much easier. 💻

Which CSS unit did you find most confusing when you first started learning CSS: %, em, rem, vh, or vw?