CSS Values and Units: The Complete Guide

Understanding CSS Value Types

CSS properties accept various types of values -- from simple keywords and numbers to complex functions and expressions. The CSS Values and Units Module defines the data types that CSS properties accept and establishes the formal grammar used to define valid values for every property and function.

Every CSS declaration consists of a property and value pair, and understanding how these values work -- whether they are absolute measurements, relative calculations, or mathematical functions -- is essential for building responsive, accessible, and maintainable websites.

Understanding CSS values and units is fundamental to professional web development, as it affects everything from typography and spacing to layout and accessibility. Mastery of these concepts separates amateur implementations from polished, professional-grade codebases.

Numeric Data Types

CSS includes several numeric data types that form the building blocks of most value specifications:

• <integer>: Whole numbers (e.g., 0, 100, -5)
• <number>: Real numbers including fractions (e.g., 1.5, 0.25, 3.14159)
• <percentage>: Values relative to another quantity (e.g., 50%, 100%)
• <dimension>: Numbers with units (e.g., 16px, 2rem, 3.5em)

CSS-Wide Values

Every CSS property accepts CSS-wide values that apply universally:

• inherit: Explicitly takes the parent element's computed value
• initial: Resets to the CSS specification's default value
• unset: Acts like inherit for inherited properties, initial for non-inherited
• revert: Rolls back to user agent default styles

Relative Length Units

Relative length units scale based on context, making them essential for responsive and accessible design. When used correctly, relative units create designs that adapt gracefully to different screen sizes, user preferences, and device capabilities.

Core Relative Units

Understanding em vs rem

The choice between em and rem is one of the most important decisions in CSS architecture:

• rem units provide predictable, consistent sizing because they always reference the root font size. This makes them ideal for typography scales, spacing, and layout dimensions.
• em units compound when nested -- if an element with 1.5em font size is inside another element with 1.5em font size, the effective size becomes 2.25em relative to the original context.

ch Unit for Character-Based Sizing

The ch unit is based on the width of the zero glyph ("0") in the element's font, making it useful for creating text containers that fit a specific number of characters.

/* ch unit - character-based sizing */
.password-input {
 width: 20ch; /* Approximately 20 characters wide */
}

.code-block {
 max-width: 60ch; /* Optimal reading line length */
}

Viewport Units

Viewport units enable sizing elements relative to the browser viewport dimensions. These units are particularly useful for creating full-screen sections, hero components, and responsive layouts that need to adapt to the available screen space.

Viewport Unit Reference

Modern Viewport Units for Mobile

A significant challenge with traditional viewport units on mobile devices is that browser UI (address bars, toolbars) dynamically appears and disappears, causing content to reflow. Modern CSS addresses this with three new viewport height variants:

• svh (small viewport height): Represents the smallest viewport height when all browser UI is visible
• lvh (large viewport height): Represents the largest viewport height when all browser UI is hidden
• dvh (dynamic viewport height): Automatically adjusts as browser UI changes

These modern units are essential for creating mobile-first experiences. Combined with CSS container query units, they enable truly responsive component-based design systems.

Percentage Units

Percentage values resolve relative to a reference value that varies by property. For width and margin-left, percentages are relative to the containing block's width. For height, percentages are relative to the containing block's height (which must be explicitly defined).

The Height Percentage Challenge

A common source of frustration for CSS developers is that height: 100% doesn't work as expected. For a percentage height to resolve, the parent element must have an explicit height defined. If the parent's height is auto (the default), the percentage height resolves to auto as well.

/* Percentage widths - relative to containing block */
.container {
 width: 80%; /* 80% of parent's width */
 max-width: 1200px;
}

.sidebar {
 width: 25%; /* 25% of parent's width */
}

/* Percentage for vertical positioning */
.overlay {
 top: 50%; /* 50% down from top of containing block */
 left: 50%; /* 50% from left of containing block */
 transform: translate(-50%, -50%); /* Center the element */
}

Understanding when to use percentages versus viewport units is key to building robust layouts. Percentages work with the containing block, while viewport units work with the browser window -- choose based on whether you want component-level or page-level responsiveness.

CSS Mathematical Functions

CSS mathematical functions enable dynamic value computation directly in stylesheets, eliminating the need for JavaScript for many responsive design patterns.

calc() Function

The calc() function performs basic arithmetic (addition, subtraction, multiplication, division). Spaces are required around + and - operators but are optional around * and /.

min() and max() Functions

The min() function selects the smallest value from a list, while max() selects the largest. These functions create responsive designs without media queries.

clamp() Function

The clamp() function combines min() and max() to create a value constrained between a minimum and maximum, with a preferred value: clamp(min, preferred, max).

Fluid Typography Example

/* Fluid typography with clamp() */
h1 {
 font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
 /* Minimum: 1.5rem, Preferred: 4vw + 1rem, Maximum: 3rem */
}

h2 {
 font-size: clamp(1.25rem, 3vw + 0.75rem, 2rem);
}

h3 {
 font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
}

body {
 font-size: clamp(0.875rem, 1vw + 0.75rem, 1.125rem);
}

Container Query Units

Container query units enable sizing elements relative to a container's dimensions rather than the viewport. To use these units, you must define a query container using container-type or container-name. This approach enables truly component-based responsive design, where components adapt to their container rather than the page viewport.

Container Query Unit Reference

/* Define a container for queries */
.card-wrapper {
 container-type: inline-size;
 container-name: card;
}

/* Container query units */
.card-content {
 font-size: clamp(0.875rem, 4cqw + 0.5rem, 1.25rem);
 padding: 2cqh 3cqw;
}

Container query units work hand-in-hand with other relative units like rem and em to create scalable design systems. For example, you might use cqw for container-relative sizing while using rem for typography within that container, combining both responsive strategies.

Best Practices for 2025

Typography

Use rem for all typography sizing to respect user browser settings and enable global scaling through the root font size. Set html { font-size: 100%; } to default to the user's preferred font size (typically 16px). For fluid typography, combine rem with clamp() or viewport units.

Layout and Spacing

• Use rem for spacing (margins, paddings, gaps) to maintain consistency with typography scaling
• Use percentages or viewport units for fluid widths that adapt to container or viewport size
• Use svh/lvh for full-screen sections
• Use container query units when designing reusable components

Borders, Shadows, and Fine Details

Use px for borders, shadows, and other elements where pixel-perfect precision matters. These elements typically don't need to scale with font size or viewport.

Accessibility

Relative units (rem, em, %) respect user font size preferences and browser zoom functionality. px units do not scale with user font size settings, potentially making text unreadable for users who need larger text. Using relative units is not just a best practice -- it's essential for inclusive web design that serves all users effectively. Sites built with proper relative units are more likely to meet WCAG accessibility guidelines and provide better experiences for users with visual impairments.

Complete Example: Responsive Card Component

This example demonstrates how to use multiple unit types appropriately in a real-world component:

/* Card component - demonstrates unit best practices */
.card {
 /* Width: fluid with max constraint */
 width: min(100%, 400px);

 /* Spacing: rem for consistency */
 padding: clamp(1rem, 3vw, 2rem);
 margin: 1rem;

 /* Borders: px for precision */
 border: 1px solid #e5e7eb;
 border-radius: 0.5rem;

 /* Shadow: px for precision */
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

 /* Typography: rem for accessibility */
 font-size: 1rem;
}

.card-title {
 font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
 font-weight: 600;
 margin-bottom: 0.75rem;
}

.card-button {
 /* Button sizing with em for component scaling */
 padding: 0.5em 1.25em;
 font-size: 1rem;
 border-radius: 0.25em;
}

/* Responsive adjustment with container queries */
@container (min-width: 350px) {
 .card {
 display: grid;
 grid-template-columns: 120px 1fr;
 gap: 1.5rem;
 padding: 1.5rem;
 }
}

This example brings together many concepts covered in this guide: viewport units for fluid typography, container query units for responsive components, rem for accessibility-compliant sizing, and px for precise design details. Understanding how to combine these tools effectively is what separates beginner CSS from professional-grade implementations.

Sources

1. MDN Web Docs - CSS values and units
2. MDN Web Docs - CSS Reference/Values
3. FrontendTools - CSS Units Guide: px vs rem vs em vs vh
4. Frontend Masters - What You Need to Know about Modern CSS (2025 Edition)