Absolute Units
Absolute units are fixed-length units. They represent a physical measurement and don't scale based on any other factors like the size of the viewport or parent element.
The absolute units in CSS are:
- Pixels (px): The most common unit for screen design. In CSS, px is treated as a consistent “CSS pixel” size used for layout, even though physical device pixels vary by screen density.
- Points (pt): Points are traditionally used in print media (one point is equal to 1/72 of an inch). In CSS, one point is defined as 1/72nd of 1in.
- Inches (in): Rarely used in web design, inches are more common in print design.
- Centimeters (cm) and Millimeters (mm): Like inches, these are more commonly used in print design.
- Picas (pc): One pica is equivalent to 12 points, or about 1/6th of an inch.
While absolute units can be useful in some scenarios (like when you need an exact size for an element), they don't offer much flexibility for responsive web design. As most of what we’ll be doing is made for a screen, we will mostly be using pixels when working with absolute units.
📌 Important note:
Modern devices scale pixels differently (device pixels vs CSS pixels), but for layout purposes, px still behaves as a fixed unit.
p {
font-size: 16px;
}
Other Absolute Units (Mostly for Print)
| Unit | Description |
|---|---|
| pt | Points (1/72 of an inch) |
| in | Inches |
| cm | Centimeters |
| mm | Millimeters |
| pc | Picas (12 points) |
These units are rarely used in web design and are mostly relevant for print stylesheets.
When to Use Absolute Units
- Borders
- Icons with fixed dimensions
- Small UI elements that shouldn’t scale
- Precise alignment cases
⚠️ Avoid absolute units for layouts and text sizes if you care about responsiveness.
Relative Units
What Are Relative Units?
Relative units scale based on something else:
- the parent element
- the root font size
- the viewport size
- the user’s browser settings
This makes them ideal for responsive and accessible designs.
Relative units in CSS are:
- Percentages (%): This unit is relative to the parent element. For example, if a parent element is 500px wide, a child element with a width of 50% will be 250px wide.
- Viewport Width (vw): One viewport width is equal to 1% of the viewport's width. For example, an element with a width of 50vw will take up half of the viewport's width, regardless of the screen size.
- Viewport Height (vh): One viewport height is equal to 1% of the viewport's height.
- em: This unit is relative to the font size of the element. If the font size of the element is 16px, 1em is equal to 16px.
- rem: This unit is relative to the font size of the root element (typically the <html> element). If the font size of the document is 16px, 1rem is equal to 16px.
- Viewport Minimum (vmin): One vmin is equal to 1% of the smaller dimension (height or width) of the viewport.
- Viewport Maximum (vmax): One vmax is equal to 1% of the larger dimension (height or width) of the viewport.
Relative units offer much more flexibility and scalability compared to absolute units, making them better suited for responsive web design. For example, using relative units allows your text to scale according to the user's custom settings, improving accessibility.
Percentages (%)
Percentages are relative to the parent element.
.container { width: 500px; }
.child { width: 50%; }
➡️ The child will be 250px wide.
✔ Great for fluid layouts
✔ Easy to understand
❌ Can become confusing in deep nesting
Viewport Units (vw, vh)
Viewport units are relative to the browser window size.
.hero { height: 100vh; }
| Unit | Meaning |
|---|---|
| 1vw | 1% of viewport width |
| 1vh | 1% of viewport height |
| vmin | 1% of the smaller dimension |
| vmax | 1% of the larger dimension |
✔ Perfect for full-screen sections
✔ Responsive by nature
❌ Can behave unexpectedly on mobile browsers when the address bar changes viewport height (especially with 100vh)
em – Relative to Element Font Size
➡️ The span will be 24px (1.5 × 16).
✔ Useful for scalable components
❌ Can compound unexpectedly when nested
rem – Relative to Root Font Size
➡️ The heading will be 32px.
✔ Predictable
✔ Great for typography
✔ Preferred over em in most cases
📌 Best practice:
Use rem for font sizes and spacing.
Why Relative Units Are Better for Responsive Design
Relative units:
- adapt to different screen sizes
- respect user accessibility settings
- scale naturally across device
- reduce the need for excessive media queries
This makes them the foundation of modern CSS design.
Absolute vs Relative Units (Quick Comparison)
| Use Case | Recommended Unit |
|---|---|
| Text size | rem |
| Layout width | %, vw |
| Spacing | rem, em |
| Full-screen sections | vh, vw |
| Borders | px |
| Icons | px |
Common Beginner Mistakes
- Using px everywhere
- Mixing em deeply without understanding inheritance
- Using viewport units for text without testing
- Ignoring accessibility concerns
A Simple Mental Model
- Absolute units = fixed
- Relative units = flexible
- Modern CSS = mostly relative units
If you remember just one thing:
Use relative units for layout and typography, absolute units for small details.
What’s Next
In the next lesson, we’ll explore CSS Colors — learning how to work with:
- named colors
- HEX
- RGB / RGBA
- HSL
- opacity and transparency
This will unlock a whole new level of design control 🎨
