What is the difference between absolute and relative units?
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.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.