CSS Units

Understanding different measurement units in CSS

📏 What are CSS Units?

CSS units are used to specify measurements for properties like width, height, margin, padding, and font-size. There are two main types: absolute units (fixed size) and relative units (flexible size). 


/* Different units in action */
.box {
    width: 200px;        /* Pixels (absolute) */
    height: 10em;        /* Em (relative) */
    margin: 2rem;        /* Rem (relative) */
    padding: 5%;         /* Percentage (relative) */
}

Types of CSS Units

📐

Absolute Units

Fixed size units

px pt cm mm
🔄

Relative Units

Flexible size units

em rem % vw/vh
📱

Viewport Units

Based on screen size

vw vh vmin vmax
🎯

Modern Units

New CSS units

ch ex fr dvh

🔹 Pixels (px) - Most Common

Pixels (px) are absolute CSS units providing precise, fixed control over element dimensions. One pixel corresponds to a single screen dot, offering predictable results across identical displays. Ideal for borders, icons, and pixel-perfect layouts, but they lack inherent responsiveness and can hinder accessibility if overused for font sizes. Despite this, pixels remain fundamental in web design, often combined with relative units in modern workflows. 

.pixel-example {
    width: 300px;
    height: 200px;
    font-size: 16px;
    border: 2px solid #333;
    padding: 20px;
}

Output:

This box is 300px wide and 200px tall with 16px font size.

🔹 Em Units - Relative to Parent

Em units are relative to the parent element's font size, enabling scalable and contextual sizing. If a parent has font-size: 16px, 1em equals 16px for child properties. This creates compounding in nested structures, making ems powerful for modular components like buttons where spacing should adapt proportionally. They support accessibility by respecting user browser settings but require careful management in deep hierarchies. 

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;    /* 1.5 × 20px = 30px */
    padding: 0.5em;      /* 0.5 × 30px = 15px */
    margin: 1em;         /* 1 × 30px = 30px */
}

Output:

Parent (20px)
Child (1.5em = 30px)

🔹 Rem Units - Relative to Root

Rem (root em) units are relative to the root element’s font size, typically the <html> tag. With a default of 16px, 1rem = 16px. Unlike em, rem values don’t compound, offering consistent scaling across the document. Ideal for global typography, spacing, and accessible responsive design, as they scale with user browser settings. Often used with a base font size set on the root for cohesive, maintainable sizing. 

/* Root font-size is typically 16px */
.rem-example {
    font-size: 1.25rem;  /* 1.25 × 16px = 20px */
    padding: 1rem;       /* 1 × 16px = 16px */
    margin: 2rem;        /* 2 × 16px = 32px */
    width: 20rem;        /* 20 × 16px = 320px */
}

Output:

This uses rem units (consistent sizing)

🔹 Percentage (%) - Relative to Parent

Percentage units define dimensions as a percentage of the parent element’s corresponding property. For example, width: 50% makes an element half its container's width. Essential for fluid, responsive layouts in grid or flexbox children, percentages adapt to container size changes. They work for widths, heights, margins, paddings, and font sizes, enabling intrinsic responsiveness when combined with min/max constraints for flexible interfaces. 

.container {
    width: 400px;
    height: 200px;
}

.percentage-box {
    width: 50%;          /* 50% of 400px = 200px */
    height: 75%;         /* 75% of 200px = 150px */
    padding: 5%;         /* 5% of parent width */
}

Output:

Container (400px × 200px)
50% × 75%

🔹 Viewport Units - Screen Based

Viewport units are relative to the browser’s viewport size. 1vw is 1% of viewport width; 1vh is 1% of height. Perfect for full-screen layouts, hero sections, or elements scaling with window size. Additional units like vmin and vmax offer control for responsive typography and spacing. Use cautiously on mobile where viewport size can change dynamically, but excellent for large-scale responsive design. 

.viewport-example {
    width: 50vw;         /* 50% of viewport width */
    height: 30vh;        /* 30% of viewport height */
    font-size: 4vw;      /* 4% of viewport width */
}

.full-screen {
    width: 100vw;        /* Full viewport width */
    height: 100vh;       /* Full viewport height */
}

Output:

50vw × 30vh

🔹 Modern CSS Units

Modern CSS introduces specialized units for component-based and typographic design. Container query units (cqw, cqh) are percentages of a container's size, enabling component-level responsiveness. Line-relative units lh and rlh are perfect for spacing related to text flow. The ch unit (width of "0") is great for limiting line length in monospace or readable prose. For robust viewport sizing, use svh/lvh/dvh to handle mobile UI variations. These units provide more precise, context-aware control than traditional options, aligning with modern component architecture and responsive design needs.

.modern-units {
    /* Character-based sizing */
    width: 20ch;         /* Width of 20 "0" characters */
    
    /* Grid fractional units */
    grid-template-columns: 1fr 2fr 1fr;
    
    /* Dynamic viewport (mobile-friendly) */
    height: 100dvh;      /* Dynamic viewport height */
    
    /* Container query units */
    font-size: 5cqw;     /* 5% of container width */
}

Output:

20ch width (character-based)

🔹 Choosing the Right Unit

Best Practices:

  • px: Borders, small fixed elements
  • rem: Font sizes, consistent spacing
  • em: Padding/margin relative to text
  • %: Responsive widths and layouts
  • vw/vh: Full-screen elements, hero sections
  • fr: CSS Grid layouts

🧠 Test Your Knowledge

Which unit is best for responsive font sizes?