CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Key Takeaways
- CSS units fall into two categories.
- Pixels are the most intuitive unit but don't scale with user preferences.
- The `em` unit is relative to the font size of the element's parent.
- The `rem` unit is relative to the root element's font size (usually 16px).
- `vw`: 1% of viewport width. Useful for full-width elements.
CSS Minifier
Absolute vs Relative Units
CSS units fall into two categories. Absolute units (like px) represent fixed measurements. Relative units (like em, rem, %) scale based on context.
Pixels (px)
Pixels are the most intuitive unit but don't scale with user preferences. On high-DPI screens, one CSS pixel may correspond to multiple device pixels. Use px for borders, shadows, and fine-grained control.
em: Relative to Parent
The em unit is relative to the font size of the element's parent. 1.5em means 1.5 times the parent's font size. Be careful with nesting — em values compound, so a nested 1.2em inside another 1.2em results in 1.44em relative to the root.
rem: Relative to Root
The rem unit is relative to the root element's font size (usually 16px). Unlike em, rem doesn't compound with nesting, making it more predictable for spacing and typography systems.
Viewport Units (vw, vh, dvh)
vw: 1% of viewport width. Useful for full-width elements.vh: 1% of viewport height. Tricky on mobile (includes/excludes address bar).dvh: Dynamic viewport height. Accounts for mobile browser chrome.svh: Small viewport height. Always the smallest possible viewport.
Recommendations
| Use Case | Recommended Unit |
|---|---|
| Font sizes | rem |
| Spacing/padding | rem or em |
| Borders | px |
| Full-screen layouts | dvh |
| Responsive widths | % or vw |
関連ツール
関連フォーマット
関連ガイド
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.
How to Build Responsive Layouts Without Media Queries
Modern CSS provides intrinsic sizing techniques that create responsive layouts without breakpoint-based media queries. Learn how to use clamp(), min(), max(), container queries, and fluid grids for truly adaptive designs.
How to Create CSS Animations Without JavaScript
CSS animations and transitions can create engaging UI effects without JavaScript. Learn keyframes, transitions, and performance-optimized animation techniques.
How to Build a CSS Color Palette Generator
Creating consistent color palettes is essential for design systems. Learn how to generate HSL-based palettes and CSS custom property scales.
How to Minify CSS for Production
CSS minification removes whitespace and comments to reduce file size. Learn safe minification techniques that don't break your styles.
Tailwind CSS vs Bootstrap vs Vanilla CSS
Choosing a CSS approach affects development speed, bundle size, and design flexibility. Compare utility-first, component-based, and custom CSS strategies.
CSS Container Queries vs Media Queries
Container queries let components respond to their container's size instead of the viewport. Learn when to use each approach for responsive design.
Troubleshooting CSS Layout Overflow and Scrollbar Issues
Unexpected horizontal scrollbars and content overflow are common CSS frustrations. Learn systematic approaches to finding and fixing overflow problems.
Troubleshooting CSS Dark Mode Transitions
Dark mode implementation can cause flash-of-unstyled-content (FOUC), inconsistent colors, and transition glitches. Learn how to fix them.
CSS Performance Optimization Best Practices
CSS affects page rendering speed more than developers realize. Learn how to reduce render-blocking, optimize selectors, and minimize layout thrashing.
CSS Logical Properties for International Layouts
Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes.
CSS Selector Specificity Deep Dive
Master CSS specificity calculation, understand the cascade, and avoid specificity wars in large projects.
How to Write CSS for Email Clients
Handle the unique CSS constraints of email clients including Outlook, Gmail, Apple Mail, and mobile clients.
CSS Architecture: BEM, SMACSS, and ITCSS Compared
Large CSS codebases become unmaintainable without architecture. Compare the three most popular CSS methodologies and learn which suits your project.
CSS Naming Conventions: BEM vs SMACSS vs Atomic
Compare CSS naming methodologies and choose the right approach for your project size and team.
How to Build CSS-Only UI Components
Create interactive UI elements like toggles, accordions, tabs, and tooltips using only CSS — no JavaScript required.
How to Create Accessible CSS Focus Styles
Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements without compromising design.
CSS Print Stylesheets: Making Web Pages Printer-Friendly
Web pages printed without a print stylesheet produce wasteful, unreadable output. Learn how to create CSS that makes your content look great on paper.
How to Generate Gradients for Web Design
Create smooth CSS gradients with proper color interpolation, avoiding muddy midpoints and banding artifacts.
CSS Grid vs Flexbox: Layout Strategy Guide
Decide between CSS Grid and Flexbox for different layout patterns with practical examples.
Troubleshooting CSS Z-Index Stacking Issues
Z-index doesn't always work as expected because of stacking contexts. Learn how stacking contexts are created, how they affect z-index, and how to debug layering issues.
CSS Container Queries: Responsive Components Guide
Use container queries to create truly responsive components that adapt to their container size.
Web Fonts Loading Strategy for Fast Page Rendering
Web fonts can delay text rendering by seconds. Learn the optimal loading strategy to balance visual quality with performance using preload, font-display, and fallback stacks.
Troubleshooting CSS Grid Layout Alignment Issues
CSS Grid is powerful but its alignment behavior can be confusing when items don't land where you expect. This guide diagnoses the most common Grid alignment problems and provides concrete fixes for each scenario.