ReviseAlgo Logo

CSS Basics

Units

Master CSS units, covering absolute units (px) and relative units (%, em, rem, vw, vh) for responsive layouts and accessible typography.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master layout sizing units. By the end of this topic, you will be able to:

  • Compare the differences between absolute units (px) and relative units.
  • Differentiate between parent-relative (em) and root-relative (rem) values.
  • Leverage viewport units (vw and vh) to build responsive element dimensions.
  • Explain why using rem units for typography is critical for web accessibility.
  • Use percentage (%) units appropriately for parent container constraints.

2. Overview

CSS units specify the size of page properties like width, margins, padding, and font-size. Units are divided into absolute units—which map to fixed measurements—and relative units—which scale dynamically based on the font size of parent elements, the root document, or the browser viewport dimensions.

3. Why This Topic Matters

Using the correct sizing units is critical for responsive design and accessibility:

  • Browser Zoom Accessibility: Users with visual impairments often increase their browser's default font size. If you declare text sizes in absolute pixels (px), the browser overrides the user's preference and keeps the text at a fixed size, making the page hard to read.
  • EM Compounding Issues: Declaring font sizes using em units inside nested elements can cause font sizes to compound unexpectedly, resulting in extremely large or tiny text.

4. Real-World Analogy

Think of sizing page components like **fitting a custom-tailored suit**:

  • Absolute Units (Pixels - px): Cutting fabric using a steel ruler. A sleeve cut to exactly 60cm will always be 60cm long, regardless of the wearer's height or size changes.
  • Root-Relative Units (rem): Tailoring sizes based on a single master pattern model. If you resize the master pattern, the entire suit scales proportionally.
  • Parent-Relative Units (em): Making the sleeve length relative to the jacket shoulder width. If the shoulder gets wider, the sleeve grows automatically to match.
  • Viewport Units (vw / vh): Fabric that stretches or shrinks dynamically based on the physical size of the room the wearer is standing in.

5. Core Concepts

Unit Option Base Calculation Primary Application
px Fixed dot coordinates (1px is 1/96th of an inch). Borders, small decorative icons.
rem Relative to the font size of the root element (<html>). (Default: 1rem = 16px). Accessible typography, layout sizing.
em Relative to the font size of the current element (or parent element for font-size). Component padding/margins that should scale with text size.
vw / vh Relative to 1% of the viewport width or height. Hero section heights, full-screen dialog layouts.

6. Syntax & API Reference

Below is a comparison of font and container layouts using different units:

7. Visual Diagram

This diagram displays how different relative units resolve their sizes:

8. Live Example — Full Working Code

A sample HTML document demonstrating responsive scaling using relative units:

9. Interactive Playground

Try It Yourself Challenges:

  1. Open your browser settings and change the default font size from Medium (16px) to Large (20px). Verify how elements styled in rem scale compared to elements styled in fixed px.
  2. Change the height unit of the banner container to 30vw and notice how it resizes when you change the window width.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Fixed text sizes in pixels Using px for font-size, blocking user browser zoom preferences. font-size: 16px; font-size: 1rem;
Nested EM compounding issues Declaring font-size in em on nested elements, causing them to shrink or grow exponentially. ul { font-size: 0.8em; } (nested lists get progressively smaller) ul { font-size: 0.8rem; } (rem scales consistently off the root size)

11. Best Practices

  • Use rem for font sizes: Always define font-size using rem units. This ensures text scales correctly when users adjust their browser's default font size.
  • Use em for padding and margins: Use em units for spacing properties (like padding and margins) on elements like badges, buttons, and alert boxes. This keeps padding proportional to the text size if the text scale changes.
  • Use percentage (%) for container constraints: Use percentage values for grid and layout widths to ensure containers resize dynamically within parent elements.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
rem and em units support Supported Supported Supported Supported
Viewport units (vw, vh) Supported (26+) Supported (19+) Supported (7+) Supported (79+)

13. Interview Questions

🟢 Q1: What is the difference between rem and em units in CSS?

Answer: rem units are calculated relative to the root element's (<html>) font size, providing consistent scaling across the entire page. em units are relative to the font size of the element they are declared on (or the parent element for font-size properties), meaning they can compound in nested structures.

14. Debugging Exercise

Explain why the nested list item text renders extremely small, and fix the CSS configuration:

View Solution

Diagnosis: The parent-relative em unit compounds. The top-level list font size is 11.2px (0.7 * 16px). Level 2 compounds to 7.8px (0.7 * 11.2px), and Level 3 shrinks to 5.46px (0.7 * 7.8px). To prevent this compounding effect, refactor the font size declaration to use rem.

Fixed CSS:

15. Practice Exercises

Exercise 1: Proportional Button Design

Build a button component with a font-size of 1.25rem. Apply padding using em units to ensure the button's vertical and horizontal padding scales proportionally if the font size is modified.

16. Scenario-Based Challenge

The Responsive Font Sizing Challenge:

An e-commerce site needs to display headings that resize smoothly based on the user's screen dimensions. Propose a layout approach using CSS custom variables combined with the clamp() function and viewport units to implement accessible, responsive typography.

17. Quick Quiz

Q1: Which unit calculates size relative to the font-size of the root HTML element?

A) em

B) rem

C) px

Answer: B — The rem (root em) unit calculates sizes relative to the root element's font-size.

18. Summary & Key Takeaways

  • • rem units calculate sizes based on the root HTML element, avoiding nested compounding issues.
  • • em units calculate sizes based on the current element, making them perfect for component spacing.

19. Cheat Sheet

Unit Scaling Basis
1rem Equal to the root element's font-size (usually 16px by default).