Web Development

Units of Measurement in CSS: A Practical Guide

June 28, 2025

O. Wolfson

When styling a webpage, understanding how CSS units work is key to building responsive, accessible, and scalable interfaces. Below, we break down the most common units—px, em, rem, %, vw, and vh—with visual examples.

1. `px` – Pixels (Fixed Size)

Definition: A fixed-size unit that doesn't scale with user settings or viewport changes.
Use case: Ideal for precise control over small elements like borders or icons.
Drawback: Doesn't adapt to user zoom or dynamic text sizes well.

Example:

html
<div style={{ width: "300px", height: "50px", background: "lightblue" }}>
  Fixed size box (100px x 50px)
</div>

Fixed size box (100px x 50px)

2. `em` – Relative to Element’s Font Size

Definition: 1em equals the computed font size of the current element.
Use case: Useful for padding/margin that scales with text.
Gotcha: Can compound if nested.

Example:

html
<div style="font-size: 20px;">
  <div style="padding: 1em; background: lightgreen;">1em padding = 20px</div>
</div>

3. `rem` – Relative to Root Font Size

Definition: 1rem equals the font size of the root (<html>) element, usually 16px.
Use case: Great for consistent spacing across components.
Advantage: No compounding like em.

Example:

html
<div style="font-size: 24px;">
  <div style="padding: 1rem; background: peachpuff;">
    1rem padding = 16px (not 24px)
  </div>
</div>

em vs rem Demo (Local Calculation)

html (root) font-size: px.parent font-size: px

em box8em × 2em

Scales with parent

120px × 16px, 8px text

rem box
8rem × 2rem

Scales with root

120px × 16px, 8px text

Note: This demo simulates em/rem math locally, but does not use real CSS rem units (which always depend on the root html font-size).

4. `%` – Percentage (Relative to Parent)

Definition: Size is calculated as a percentage of the parent element’s dimension.
Use case: Responsive width/height, flexible layout components.
Important: For height, the parent must have a defined height.

Example:

html
<div style="width: 300px; height: 100px; background: lightgray;">
  <div style="width: 50%; height: 100%; background: lightcoral;">
    50% width, 100% height
  </div>
</div>

50% width, 100% height

5. `vw` / `vh` – Viewport Width / Height

Definition:
- 1vw = 1% of viewport width
- 1vh = 1% of viewport height
Use case: Fullscreen sections, dynamic typography, layout containers.
Caution: Can break layout on small devices if not handled carefully.

Example:

html
<div style="width: 50vw; height: 30vh; background: skyblue;">
  50vw x 30vh box
</div>

50vw x 30vh box

🔄 Summary Table

Unit	Relative To	Common Use Cases	Scales With Font Size?
px	Absolute	Borders, icon size	❌
em	Parent font size	Padding, line height	✅
rem	Root font size	Consistent sizing across app	✅
%	Parent element	Widths, heights	❌
vw	Viewport width	Full-screen layouts, text	❌
vh	Viewport height	Hero sections, splash screens	❌

🧪 Try It Yourself (CodePen)

You can test all these examples interactively here: 👉 CodePen Example – CSS Units Demo (or paste the HTML snippets above into your own playground)

Units of Measurement in CSS: A Practical Guide

1. px – Pixels (Fixed Size)

2. em – Relative to Element’s Font Size

3. rem – Relative to Root Font Size

em vs rem Demo (Local Calculation)

4. % – Percentage (Relative to Parent)

5. vw / vh – Viewport Width / Height

🔄 Summary Table

🧪 Try It Yourself (CodePen)

Units of Measurement in CSS: A Practical Guide

1. px – Pixels (Fixed Size)

2. em – Relative to Element’s Font Size

3. rem – Relative to Root Font Size

em vs rem Demo (Local Calculation)

4. % – Percentage (Relative to Parent)

5. vw / vh – Viewport Width / Height

🔄 Summary Table

🧪 Try It Yourself (CodePen)

1. `px` – Pixels (Fixed Size)

2. `em` – Relative to Element’s Font Size

3. `rem` – Relative to Root Font Size

4. `%` – Percentage (Relative to Parent)

5. `vw` / `vh` – Viewport Width / Height

1. `px` – Pixels (Fixed Size)

2. `em` – Relative to Element’s Font Size

3. `rem` – Relative to Root Font Size

4. `%` – Percentage (Relative to Parent)

5. `vw` / `vh` – Viewport Width / Height