CSS Units and Measurements

CSS units determine how big or small things are on your web page. Choosing the right units can make your designs responsive and maintainable.

Absolute Units

Absolute units are fixed sizes that don’t change based on anything else.

Pixels (px)

The most common unit. One pixel equals one dot on your screen.

.text {
  font-size: 16px;
  width: 200px;
}

Points (pt)

Used mainly for print styles. 1pt = 1/72 inch.

@media print {
  body {
    font-size: 12pt;
  }
}

Inches (in), Centimeters (cm), Millimeters (mm)

Physical measurements. Use for print styles.

.paper {
  width: 8.5in; /* Letter size */
  height: 11in;
}

Relative Units

Relative units scale based on other elements or the viewport.

Em

Relative to the font-size of the parent element.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 24px */
  padding: 2em; /* 32px */
}

Rem

Relative to the root element’s font-size (usually the html element).

html {
  font-size: 16px;
}

.heading {
  font-size: 2rem; /* 32px */
}

.paragraph {
  font-size: 1rem; /* 16px */
  margin: 1.5rem; /* 24px */
}

Percentage (%)

Relative to the parent element’s size.

.container {
  width: 800px;
}

.column {
  width: 50%; /* 400px */
}

Viewport Units

Units based on the browser viewport size.

vw (Viewport Width)

1vw = 1% of viewport width.

.full-width {
  width: 100vw;
}

.half-screen {
  width: 50vw;
}

vh (Viewport Height)

1vh = 1% of viewport height.

.full-height {
  height: 100vh;
}

.half-height {
  height: 50vh;
}

vmin and vmax

vmin = smaller of vw or vh, vmax = larger.

.square {
  width: 50vmin;
  height: 50vmin; /* Always square, fits in viewport */
}

Font-relative Units

ex

Relative to the x-height of the font (height of lowercase x).

.superscript {
  font-size: 0.8ex;
  vertical-align: super;
}

ch

Relative to the width of the “0” character.

.monospace {
  width: 20ch; /* Width of 20 zero characters */
}

Practical Examples

Responsive Typography

Use rem for scalable text.

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Everything scales down */
  }
}

h1 {
  font-size: 2rem; /* 32px on desktop, 28px on mobile */
}

p {
  font-size: 1rem; /* 16px on desktop, 14px on mobile */
}

Flexible Layouts

Mix units for responsive designs.

.container {
  width: 90vw; /* 90% of viewport width */
  max-width: 1200px; /* But not wider than 1200px */
  margin: 0 auto;
}

.sidebar {
  width: 250px; /* Fixed width */
}

.main {
  width: calc(100% - 250px); /* Remaining space */
}

Spacing System

Create consistent spacing with rem.

:root {
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem;   /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem;   /* 32px */
  --space-xl: 3rem;   /* 48px */
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

Full-screen Sections

Use viewport units for hero sections.

.hero {
  height: 100vh; /* Full viewport height */
  background: linear-gradient(to bottom, #007bff, #0056b3);
  display: flex;
  align-items: center;
  justify-content: center;
}

Flexible Images

Make images responsive.

.responsive-image {
  width: 100%; /* Full width of container */
  height: auto; /* Maintain aspect ratio */
  max-width: 500px; /* But not larger than 500px */
}

The calc() Function

Combine different units with math.

.column {
  width: calc(50% - 1rem); /* 50% minus 1rem */
}

.spacing {
  margin: calc(2rem + 10px); /* 2rem plus 10px */
}

When to Use Each Unit

px: Fixed sizes, borders, small details
rem: Typography, spacing, component sizing
em: Relative sizing within components
%: Flexible layouts, responsive design
vw/vh: Full-screen elements, large sections
ch: Monospace text, form inputs

Best Practices

Use rem for most measurements for accessibility
Set a base font-size on html for rem scaling
Use px for borders and small details
Combine units with calc() for complex layouts
Test on different screen sizes and zoom levels

Common Mistakes

Using px everywhere (not responsive)
Mixing em and rem inconsistently
Forgetting to set html font-size
Using vh for small elements (can be too big)
Not testing with browser zoom

Browser Support

All modern units are well supported:

Chrome: Full support
Firefox: Full support
Safari: Full support
Edge: Full support

Viewport units have good support in modern browsers.

External Resources:

Related Tutorials:

Last updated on January 10, 2026

Pseudo-classes and Pseudo-elements Z-index and Stacking Context