CSS Absolute and Relative Units | Generated by AI
CSS Units: Absolute vs Relative – Comprehensive Explanation
CSS provides two main categories of units: absolute and relative.
1. Absolute Units
These have a fixed, real-world size that does not change based on anything else in the document (except device pixel ratio on screens).
| Unit | Name | Description | Typical Use Case |
|---|---|---|---|
| px | Pixels | 1px = 1/96th of 1 inch (CSS reference pixel) | Most common for fine control (borders, icons, etc.) |
| cm | Centimeters | Real-world centimeter | Print stylesheets |
| mm | Millimeters | Real-world millimeter | |
| in | Inches | 1in = 2.54cm | |
| pt | Points | 1pt = 1/72th of 1 inch | Print (traditional typography) |
| pc | Picas | 1pc = 12pt | |
| Q | Quarter-millimeters | 1Q = 1/40th of 1cm | High-precision print |
From your options, only px (A) is absolute.
2. Relative Units
These scale based on something else (parent, root, viewport, etc.). This makes layouts responsive and accessible.
| Unit | Name | Relative to what? | Common Uses & Behavior |
|---|---|---|---|
| em | em | Font size of the current element | Great for component-level scaling (e.g., inside a card or button). Compound effect: 1.5em inside a parent that is already 1.2em becomes 1.2 × 1.5 = 1.8 times the root font size. |
| rem | Root em | Font size of the root element (<html>) |
Preferred for global scaling. No compounding issue. Changing html { font-size: 62.5%; } makes 1rem = 10px for easy math. |
| % | Percentage | Depends on the property: • For font-size → parent’s font-size • For width/height → parent’s width/height • For margin/padding → parent’s width (even vertical ones!) |
Extremely common for layouts (Flexbox/Grid), responsive typography, spacing. |
| vw | Viewport width | 1vw = 1% of the viewport width | Large typography, full-width elements |
| vh | Viewport height | 1vh = 1% of the viewport height | Hero sections, full-height containers |
| vmin | Viewport minimum | 1vmin = 1% of the smaller viewport dimension | Responsive text that never gets too big on mobile |
| vmax | Viewport maximum | 1vmax = 1% of the larger viewport dimension | Less used, but helpful in some edge cases |
| ex | x-height | Height of the lowercase “x” in the font | Rarely used today (inconsistent across fonts) |
| ch | Character | Width of the “0” (zero) character in the font | Useful for limiting line length (max-width: 65ch) |
| lh | Line height | Line height of the element (CSS Logical Properties, newer) | Vertical rhythm spacing |
Why relative units matter
- Accessibility: Users who increase browser font size (or use zoom) will see proper scaling only with relative units.
- Responsiveness: Layouts automatically adapt when the viewport changes.
- Maintainability: Change one value (e.g., root font-size) and everything scales proportionally.
Quick cheat-sheet for your original question
| Option | Unit | Type | Reason |
|---|---|---|---|
| A | px | Absolute | Fixed physical size |
| B | em | Relative | Relative to element’s own font-size |
| C | % | Relative | Relative to parent (varies by property) |
| D | rem | Relative | Relative to root (<html>) font-size |
Correct answer: B, C, D – em, %, and rem are all relative units.
Using rem for most spacing/typography and % or vw/vh for layout is the modern best practice in almost every professional project today.