CSS Units Guide — a complete map of units and when to use each one

CSS units define sizes for text, elements, and spacing. Choosing the right unit makes the difference between rigid and responsive design.

Before you start

This lesson is a general map of all units. Next, we will compare px vs em vs rem, then explore relative units for responsiveness.

If you are searching for the difference between px and rem in CSS or when to use % vs vw vs vh or best CSS units for responsive design, this lesson explains it clearly.

What Are CSS Units?

Units are how we write values in CSS such as 16px, 1rem, or 70%. Without the right unit, a design can look inconsistent across screens.

Simple definition: CSS units are the language that defines "how much" size an element or text has on the page.

Types of CSS Units

• Absolute units: such as px.
• Relative units: such as em, rem, %, vw, and vh.

The Difference Between px and rem in CSS

.text-px {
    font-size: 18px;
}

.text-rem {
    font-size: 1.125rem;
}

What does this code do? Gives two similar text sizes using different units.

Expected result: rem is more flexible with user settings and root size.

Common mistake: relying only on px for all text.

Using % in CSS Layout

.box {
    width: 70%;
}

What does this code do? Makes the element width depend on its parent container.

Expected result: a flexible element that changes with the screen size.

Common mistake: using % without understanding the parent dimensions.

Using vw and vh in CSS

.hero {
    width: 100vw;
    height: 50vh;
}

What does this code do? Ties element dimensions directly to the viewport.

Expected result: sections that respond easily to screen size.

Common mistake: always using 100vh on mobile without testing.

When to Use Each Unit in CSS

• Use rem for text and general spacing across the project.
• Use px for precise details like borders and small icons.
• Use % for flexible widths inside layouts.
• Use vw and vh for sections tied to the viewport.

Common Mistakes in CSS Units

1) Random mixing of units: leads to inconsistent UI.

2) Using px for everything: reduces responsive flexibility.

3) Skipping mobile testing: values that work on desktop can fail on phones.

FAQ - Common Search Questions

What are CSS units?

Units define the sizes of elements, text, and spacing like px, em, rem, %, vw, and vh.

What is the difference between px and rem in CSS?

px is fixed, while rem is relative and depends on the html font size.

When should I use % in CSS?

When you want a size based on the parent element, like column and card widths.

When should I use vw and vh?

When you want elements tied directly to the viewport, such as hero sections.

What is the best unit for text in CSS?

Usually rem because it is flexible and easier to manage for a consistent type system.