CSS: Units & Values

Choose the right unit for every situation.

Absolute Units

Absolute units have a fixed size that does not change based on the screen, parent element, or user settings. They are predictable but inflexible.

`Absolute Units`

Absolute units map to real-world measurements. On screens, px is the only absolute unit you will use regularly, the rest are mainly for print.

px: pixel; the standard unit for screen design; 1px = 1 device-independent pixel
pt: point; mainly for print stylesheets; 1pt = 1/72 of an inch
cm / mm: centimetres and millimetres; used for print layouts only
in: inch; 1in = 96px on screen
On screens, use px for borders, shadows, and media query breakpoints

Absolute Units

px values are fixed regardless of screen size or user settings.

.px-text {
  font-size: 18px;
  color: steelblue;
}

.px-box {
  width: 200px;
  height: 40px;
  background: lightsteelblue;
  margin-top: 8px;
}

Relative Units (%, em, rem)

Relative units scale based on something else, a parent element, the root font size, or the viewport. They are the foundation of responsive and accessible design.

`%, em, rem`

Relative units adapt to context. rem is the most predictable: it always relates to the root font size. em compounds through nesting, which can cause surprises.

%: relative to the parent element's same property (e.g. width: 50% = half the parent's width)
em: relative to the element's own font-size; 2em = twice the current font size
rem: relative to the root font-size; 1rem = 16px by default
Prefer rem for font sizes, it respects the user's browser font preference
em compounds in nested elements, 1.2em inside 1.2em = 1.44em

%, em, rem

em is relative to the parent font-size; rem is always relative to the root.

.parent    { font-size: 20px; border: 1px solid #ccc; padding: 12px; }
.em-child  { font-size: 1.5em; color: steelblue; }  /* 1.5 × 20px = 30px */
.rem-child { font-size: 1.5rem; color: green; }     /* 1.5 × 16px = 24px */

Viewport Units (vw, vh, vmin, vmax)

Viewport units are relative to the browser window size. They are ideal for full-screen sections, fluid typography, and layouts that must fill the screen.

`vw, vh, vmin, vmax`

Viewport units make elements size themselves relative to the visible browser window, not the parent element.

vw: 1% of the viewport width; 100vw = full window width
vh: 1% of the viewport height; 100vh = full window height
vmin: 1% of the smaller viewport dimension (width or height)
vmax: 1% of the larger viewport dimension
Common use: height: 100vh for full-screen hero sections

Viewport Units

100vh fills the full browser height; vw scales with window width.

.hero {
  height: 30vh;
  background: steelblue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fluid-text {
  font-size: 4vw;
  margin-top: 12px;
  color: steelblue;
}

ch and ex Units

These two units are based on the dimensions of characters in the current font, useful for typography-driven layouts.

`ch and ex`

ch and ex units tie measurements to the current font's character dimensions, making them ideal for controlling readable line lengths and precise typographic spacing.

ch: width of the '0' (zero) character in the current font
ex: height of the lowercase 'x' character (x-height) in the current font
width: 60ch, a classic readable line length (45–75ch is optimal for body text)
ex is rarely used directly but useful for aligning text vertically with icons

ch Unit

60ch keeps body text at a comfortable reading width.

.readable {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

When to Use Each Unit Type

There is no single best unit, the right choice depends on what you are sizing.

Use Case	Recommended Unit	Why
Font sizes	rem	Scales with user's browser preference
Spacing (margin, padding)	rem or px	rem scales; px is fine for small fixed gaps
Layout widths	% or ch	Flexible and content-aware
Full-screen sections	vh / vw	Relative to the actual viewport
Borders, shadows	px	Always need a precise, fixed size
Readable line length	ch	Tied to font character width
Media query breakpoints	px or em	px is simple; em respects zoom level

Zero Values and Unit-less Properties

When a value is zero, no unit is needed, zero pixels, zero ems, and zero percent are all the same thing. Some properties also accept unit-less numbers.

`Zero & Unit-less Values`

Zero is always zero regardless of unit, so attaching a unit is unnecessary noise. Some properties like line-height and font-weight take plain numbers without units.

margin: 0: correct; no unit needed for zero
margin: 0px: valid but redundant; avoid
line-height: 1.5: unit-less; 1.5× the element's font-size (preferred)
opacity: 0.5: unit-less number between 0 and 1
z-index: 10: unit-less integer

Zero & Unit-less Values

Zero needs no unit; line-height and opacity use plain numbers.

.example {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  opacity: 0.85;
  font-size: 1rem;
}

CSS Functions: calc(), min(), max(), clamp()

CSS provides built-in math functions that let you compute values dynamically, mixing units and setting responsive constraints without JavaScript.

`calc(), min(), max(), clamp()`

calc(): performs math with mixed units: width: calc(100% - 32px)
min(): picks the smallest value: width: min(100%, 600px)
max(): picks the largest value: font-size: max(1rem, 2vw)
clamp(min, ideal, max): constrains a value between a min and max: font-size: clamp(1rem, 2.5vw, 2rem)

calc()

Subtract a fixed px value from a flexible percentage.

.sidebar { width: 200px; background: lightsteelblue; float: left; padding: 12px; }
.main    { width: calc(100% - 200px); background: #f1f5f9; float: left; padding: 12px; }

min() and max()

min() caps the maximum size; max() sets a minimum floor.

.box-min {
  width: min(100%, 400px); /* never wider than 400px */
  background: #dbeafe;
  padding: 10px;
  margin-bottom: 8px;
}

.box-max {
  width: max(200px, 30%); /* never narrower than 200px */
  background: #dcfce7;
  padding: 10px;
}

clamp()

Font size scales with viewport but never goes below min or above max.

/* clamp(minimum, ideal, maximum) */
.fluid-heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: steelblue;
}

.fluid-body {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: #444;
}

Knowledge Check

1. Which unit is relative to the root element's font size?

2. What does 1vw equal?

3. Which CSS function restricts a value between a minimum and maximum?

4. When using margin: 0, do you need to write margin: 0px?

5. Which unit is best for font sizes in accessible, scalable designs?

Previous Next