CSS Absolute Units
In this page:
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
@media print {
body {
margin: 2cm;
}
}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>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: