CSS Units px, em, rem, vw, vh: Tutorial, Examples, FAQs & Interview Tips

CSS Units px, em, rem, vw, vh

CSS units decide how big something is and what that size depends on. A pixel value stays fixed, a percentage depends on the parent, rem depends on the root font size, and viewport units depend on the screen.

Choosing the right unit is a design decision, not just syntax. Use fixed units when a value must be exact, relative units when a layout should adapt, and character-based units when readability matters.

Add one worked example that compares the normal path with the boundary case for CSS Units px, em, rem, vw, vh.

Keep the note tied to a real CSS workflow so the idea is easier to recall later.

CSS Units px em rem vw vh should be studied as a practical CSS lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.

Absolute Units

Absolute units represent a fixed measurement. They do not scale naturally based on the screen or parent element, so they are best used when exact sizing is truly needed.

px - pixels, the most common absolute-like unit in screen design
pt - points, often used in print contexts
cm, mm, in - physical units, rarely useful for screen layouts

Relative Units

Relative units scale in relation to another value, such as the root font size, parent font size, viewport size, or container size. These units are much more useful for responsive design.

Unit	Relative To	Common Use
em	Current element font size	Component spacing tied to local text
rem	Root font size	Consistent spacing and typography
%	Parent size	Fluid widths and layout sizing
vw	Viewport width	Full-width sections, fluid typography
vh	Viewport height	Hero sections, full-screen panels
ch	Width of the "0" character	Readable text line lengths

Common Unit Patterns

Most production styles mix units. A layout might use rem for spacing, percent for fluid width, ch for readable article length, and px for a one-pixel border. The goal is not to avoid px completely, but to use each unit for the job it does best.

Practical unit choices

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
}

.container {
    width: 90%;
    max-width: 72rem;
}

.hero {
    min-height: 100vh;
}

.article {
    max-width: 65ch;
}

Choosing the Right Unit

Be careful with viewport height on mobile browsers because browser toolbars can change the visible viewport. Newer units like svh, lvh, and dvh can help when supported, but min-height and flexible layouts are often more reliable than forcing exact full-screen panels.

Use rem for fonts and spacing that should stay consistent across the page.
Use em when a component should scale based on its own text size.
Use percentages for flexible widths inside a parent container.
Use viewport units carefully for full-screen sections and fluid layouts.
Use px when a precise fixed size is genuinely needed.

Readable article and responsive spacing

.article {
    width: min(100% - 2rem, 68ch);
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem);
}

.article p {
    font-size: 1rem;
    line-height: 1.7;
}

.hero {
    min-height: 100svh;
    padding: 2rem;
}

CSS Units px em rem vw vh in Real Work

CSS Units px em rem vw vh matters in CSS because it changes how a program is written, tested, or debugged. The page should explain the normal flow first: what the developer writes, what the runtime or platform does, and what result should appear.

When teaching CSS Units px em rem vw vh, avoid stopping at syntax. Show the surrounding decision: why this feature is chosen, what problem it removes, and what would become harder if the feature were not used.

Identify the concrete problem solved by CSS Units px em rem vw vh.
Show the normal input, operation, and output for css.
Mention the nearby alternative a beginner may confuse with this topic.
Tie the explanation to a real project task, command, component, query, or debugging step.

CSS Units px em rem vw vh CSS normal case

.lesson-box {
  display: block;
  max-width: 42rem;
  padding: 1rem;
}

CSS Units px em rem vw vh CSS fallback case

.lesson-box:empty::before {
  content: "CSS Units px em rem vw vh: add visible content";
}

Key Takeaways

Use rem for consistent type and spacing across the site.
Use em when child spacing should scale with local font size.
Use percentages for flexible widths inside a parent.
Use ch for readable text measure, such as max-width: 65ch.
Use viewport units carefully on mobile and test browser toolbar behavior.

Common Mistakes to Avoid

WRONG Setting long article text to width: 100vw.

RIGHT Use a readable max-width such as 65ch or 72ch with auto margins.

Full-width text is difficult to read on large screens.

WRONG Using em everywhere without understanding compounding.

RIGHT Use rem for global consistency and em only when local scaling is intended.

Nested em values can multiply unexpectedly.

WRONG Forcing mobile sections to exactly 100vh without testing browser chrome.

RIGHT Use min-height or newer viewport units like svh/dvh where appropriate.

Mobile browser address bars can change viewport height.

WRONG Memorizing CSS Units px em rem vw vh without the situation where it is useful.

RIGHT Connect CSS Units px em rem vw vh to a concrete CSS task.

Purpose makes syntax easier to recall.

Practice Tasks

Create an article container using max-width: 65ch and compare readability with 100% width.
Build a card using rem padding and then change the root font size.
Create a button using em padding so it scales with its own font size.
Test a 100vh hero and a 100svh hero in mobile responsive mode.
Write a small example that uses CSS Units px em rem vw vh in a realistic CSS scenario.

Frequently Asked Questions

Should I use <code>px</code> or <code>rem</code> for font sizes?

<code>rem</code> is usually better for accessibility and consistency because it respects the root font size more naturally.

Why can <code>em</code> feel confusing?

Because it compounds based on the current element's font size. Nested elements can grow faster than expected if you are not careful.

Are viewport units always safe?

They are useful, but mobile browser UI can affect viewport height, so test <code>vh</code>-based layouts on real devices.

Previous Next

CSS Units px, em, rem, vw, vh: Tutorial, Examples, FAQs & Interview Tips