CSS Absolute Units

The Full Absolute Unit Family

Beyond px, CSS defines pt (points, 1/72 of an inch), pc (picas, 12 points), in (inches), cm (centimeters), and mm (millimeters). All of these are fixed, non-scaling units — 1in always equals 96px by CSS specification, regardless of screen resolution or user settings.

Example: The Full Absolute Unit Family

<style>
.a { width: 1in; background: steelblue; color: white; padding: 4px; margin-bottom: 4px; }
.b { width: 2.5cm; background: seagreen; color: white; padding: 4px; margin-bottom: 4px; }
.c { width: 25mm; background: coral; color: white; padding: 4px; }
</style>
<div class="a">1 inch</div>
<div class="b">2.5 centimeters</div>
<div class="c">25 millimeters</div>

Why Absolute Units Rarely Belong in Screen Layouts

Because absolute units never scale with the user's browser zoom, font-size preferences, or device pixel density in a meaningful way, using them for on-screen text or spacing can defeat accessibility features like browser text-zoom.

This is the core reason relative units are recommended over absolute ones for regular web layout.

Example: Why Absolute Units Rarely Belong in Screen Layouts

<style>
p {
  font-size: 12pt;
}
</style>
<p>Fixed 12pt size ignores browser zoom and text-size preferences</p>

Where Absolute Units Genuinely Fit

Print stylesheets are the one place absolute physical units make real sense, since a printed page has actual physical dimensions. Setting page margins in inches or centimeters inside an @media print block produces predictable, physically accurate printed output.

Example: Where Absolute Units Genuinely Fit

<style>
body { font-family: sans-serif; padding: 1rem; }
@media print {
  body {
    margin: 2cm;
  }
}
</style>
<p>Printed with a 2cm margin.</p>

Converting Between Absolute Units

CSS defines fixed conversion ratios between absolute units: 1in = 2.54cm = 25.4mm = 96px = 72pt = 6pc. Knowing these ratios helps when translating a design spec given in one unit (like a print brief in millimeters) into CSS.

Example: Converting Between Absolute Units

<style>
.a {
  width: 1in;
  background: steelblue;
  color: white;
  padding: 4px;
  margin-bottom: 4px;
}
.b {
  width: 96px;
  background: seagreen;
  color: white;
  padding: 4px;
}
</style>
<div class="a">1in</div>
<div class="b">96px — the same physical width</div>

Absolute vs Relative: A Quick Decision Guide

As a rule of thumb: use absolute units only for print stylesheets or truly fixed physical measurements, and use relative units (covered in the companion CSS Relative Units topic) for essentially everything else on-screen, including font sizes, spacing, and component dimensions.

Example: Absolute vs Relative: A Quick Decision Guide

<style>
@media print {
  .page { margin: 2cm; }
}
.text {
  font-size: 1rem;
}
</style>
<div class="page">
  <p class="text">Absolute units for print, relative units for on-screen text</p>
</div>