Understanding CSS Units

Pixels (px)

Pixels are the most fundamental unit in digital design. Key points:

  • One pixel represents the smallest unit of a digital display
  • Pixels are absolute units - they remain the same size regardless of device or parent element
  • Best used for: borders, small precise adjustments, and fixed-size elements
  • Not recommended for responsive design as they don't scale with screen size
.box { width: 200px; height: 100px; }
200px × 100px box

Percentages (%)

Percentages are fundamental to responsive design. Important aspects:

  • Always relative to the parent element's corresponding dimension
  • Width percentages are based on parent's width
  • Height percentages require parent to have a defined height
  • Perfect for creating fluid layouts that adapt to different screen sizes
.box { width: 50%; height: 100px; }
50% width box

Root EM (rem)

REM units provide consistent scaling across the entire document:

  • Always relative to the root (html) element's font-size
  • Default root font-size is typically 16px
  • Ideal for maintaining consistent spacing and typography
  • Enables easy global scaling by adjusting root font-size
.text { font-size: 2rem; } /* 2 times the root font-size */

This text is 2rem

EM

EM units offer contextual scaling based on parent elements:

  • Relative to the immediate parent's font-size
  • Can compound when nested (careful with multiple levels)
  • Useful for creating modular, component-based designs
  • Great for maintaining proportional relationships within components
.parent { font-size: 20px; } .child { font-size: 1.5em; } /* 1.5 times parent's font-size */
Parent text (20px)
Child text (1.5em = 30px)

Viewport Units (vh, vw)

Viewport units are modern and powerful units for responsive design:

  • vh: 1% of viewport height
  • vw: 1% of viewport width
  • vmin: 1% of viewport's smaller dimension
  • vmax: 1% of viewport's larger dimension
  • Perfect for full-screen layouts and hero sections
.box { height: 50vh; width: 50vw; }
This box is 50vh high

Hover over sections to see interactive effects!

← Back to Index