What Are CSS Units?

Every size value in CSS needs a unit of measurement. Whether you're setting font sizes, widths, margins, or padding, you need to tell the browser what unit you're using. CSS units fall into two categories: absolute and relative.

This article covers absolute units — units that represent a fixed size regardless of the surrounding context.

Pixels (px)

The pixel (px) is the most commonly used absolute unit in CSS. One CSS pixel represents one dot on a standard display.

CSS

h1 { font-size: 32px; }
p { font-size: 16px; }
.container { width: 1200px; }
.card { padding: 20px; margin-bottom: 16px; }

CSS Pixels vs Device Pixels

A CSS pixel is not the same as a physical screen pixel. On high-DPI (Retina) displays, one CSS pixel may actually be rendered using 2 or 3 physical pixels. This is handled automatically by the browser.

CSS

/* This div is 200 CSS pixels wide */
/* On a 2x Retina display, it uses 400 physical pixels */
.box { width: 200px; }

This distinction is important for image quality — a 200px-wide image may look blurry on Retina displays because it only has enough detail for standard screens.

When to Use Pixels

Pixels are best for:

Borders: border: 1px solid #ccc
Box shadows: box-shadow: 0 2px 4px rgba(0,0,0,0.1)
Small fixed spacing: gap: 8px
Media query breakpoints: @media (min-width: 768px)
Maximum/minimum constraints: max-width: 1200px

When NOT to Use Pixels

Avoid pixels for:

Font sizes — use rem instead for accessibility
Fluid layouts — use percentages or viewport units
Spacing that should scale — use em or rem

Centimeters (cm)

One centimeter in CSS. Centimeters are rarely used for screen design but can be useful for print stylesheets:

CSS

@media print {
  .page {
    width: 21cm;   /* A4 paper width */
    height: 29.7cm; /* A4 paper height */
    margin: 2cm;
  }
}

Millimeters (mm)

One millimeter in CSS. Like centimeters, primarily useful for print:

CSS

@media print {
  .label {
    width: 90mm;
    height: 50mm;
    padding: 5mm;
  }
}

Inches (in)

One inch in CSS (equal to 2.54cm or 96px). Also mainly for print:

CSS

@media print {
  .document {
    width: 8.5in;  /* US Letter width */
    height: 11in;   /* US Letter height */
    margin: 1in;
  }
}

Points (pt) and Picas (pc)

These are traditional typographic units:

1pt = 1/72 of an inch (common in print design)
1pc = 12pt = 1/6 of an inch

CSS

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

Unit Conversion Table

Here is how absolute units relate to each other:

1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc
1cm = 37.8px
1mm = 3.78px
1pt = 1.33px
1pc = 16px

CSS

/* All of these are the same size */
.a { width: 96px; }
.b { width: 1in; }
.c { width: 2.54cm; }
.d { width: 25.4mm; }
.e { width: 72pt; }
.f { width: 6pc; }

The Problem with Absolute Units

Absolute units create fixed sizes that don't adapt to:

Different screen sizes (mobile, tablet, desktop)
User font size preferences
Zoom levels (for px specifically, modern browsers do handle zoom)
Different devices and resolutions

CSS

/* This will be too wide on small screens */
.container { width: 1200px; }

/* This won't scale if the user increases their browser font size */
p { font-size: 16px; }

This is why modern CSS favors relative units for most sizing needs.

Practical Pixel Patterns

Despite the limitations, pixels are still essential for specific use cases:

CSS

/* Fine borders and outlines */
.input { border: 1px solid #ccc; }
.input:focus { outline: 2px solid #3498db; }

/* Fixed max-width containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Shadow effects */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
}

/* Media queries */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

Summary

CSS absolute units define fixed sizes: px (pixels) for screen design, and cm, mm, in, pt, pc for print. Pixels are the most common absolute unit, ideal for borders, shadows, and max-width constraints. However, for font sizes and fluid layouts, relative units (covered in the next article) are preferred because they adapt to different screens and user preferences.