Absolute vs. Relative Units
When defining the size of any Box Model property (width, margin, padding, font-size, etc.), you need to use a unit of measurement. CSS units are fundamentally categorized into two types: Absolute and Relative.
Choosing the right unit is critical for creating responsive, scalable, and accessible web experiences.
1. Absolute Units (Fixed)
Absolute length units resolve to a fixed size, regardless of the size of the viewport, the element's parent, or the user's settings. Once declared, the physical size of the element on the screen is fixed (assuming no zooming).
The most common absolute unit is the pixel.
| Unit | Description | Best for... |
|---|---|---|
px | Pixels. The number of dots on a screen. The most commonly used absolute unit. | Small borders, shadows, or when you need guaranteed pixel-perfect alignment. |
pt | Points. is of an inch. Mainly used in print styles. | Print stylesheets (not generally used for screen). |
When to use px:
- When the unit must not scale (e.g., a border).
- When a specific size is required and responsiveness is managed by other elements (like
max-width).
Drawbacks of px:
- Poor Accessibility: When a user increases the base font size in their browser settings (for better readability), any text sized with
pxwill not scale, leading to a poor user experience.
2. Relative Units (Scalable)
Relative length units define a size that is relative to another length property. This could be the size of the parent element, the root element, or the viewport dimensions.
Relative units are the foundation of responsive and accessible design because they automatically scale when the context changes.
Common Relative Units
| Unit | Description | Relative To... | Best for... |
|---|---|---|---|
em | Element M. Based on the font size of the parent element. | Creating component-specific scaling (e.g., button padding relative to its own font size). | |
rem | Root EM. Based on the font size of the root <html> element. | Typography, margins, and padding. The preferred unit for large-scale font sizing. | |
% | Percentage. Calculated as a percentage of the parent element's size. | Width and height of layout containers. | |
vw | Viewport Width. is of the viewport width. | Full-screen hero sections, fluid typography, or elements that must scale with the window. | |
vh | Viewport Height. is of the viewport height. | Elements that must fill the vertical screen space (e.g., height: 100vh). |
Key Concept: em vs. rem
The difference between em and rem is crucial for typography and spacing consistency.
em (The Cascading Unit)
If you use em for the font size of a child element, and that child is nested several levels deep, the size can become unpredictable because it compounds based on every parent's font size.
rem (The Stable Unit)
The rem unit solves the cascading problem by always basing its value on the font size of the root <html> element. If the user changes their browser's base font size, all rem-sized elements scale uniformly, maintaining the intended spatial relationships.
For typography, margins, and padding, rem is generally the recommended unit because it ensures that all elements scale correctly with user-defined browser font settings, fulfilling WCAG accessibility guidelines.
Interactive Unit Demo
Observe how the size of the "Content Box" changes when you adjust the unit type. Note how rem is fixed relative to the root, while em scales based on the parent container's font size.