Suggest an edit

Improve this article

Refine the answer for “What is the difference between absolute and relative units?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Absolute units

**Absolute units** are fixed values that do not depend on screen settings, scale, or font.
Example: `px`, `cm`, `mm`, `in`, `pt`, `pc`.
If an element is given `width: 200px;`, it will be 200 pixels under any conditions.

## Relative units

**Relative units** are units that **depend on the context**: screen size, font, or viewport.
Examples and what they depend on:

| Unit | What it depends on |
|---|---|
| `%` | the size of the parent element |
| `em` | the current font size of the element |
| `rem` | the font size of the root (`html`) |
| `vw` | the width of the viewport (1vw = 1% of width) |
| `vh` | the height of the viewport (1vh = 1% of height) |
| `fr` | the free space in Grid |

## Main difference

| Absolute | Relative |
|---|---|
| Always fixed | Scale depending on the context |
| Can break responsiveness | Provide flexibility and responsiveness |

## Summary

Absolute units are static values.
Relative ones are flexible, adaptive, and depend on the environment.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts187 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.