CSS Size Units

In web design, we’ve all done some trial and error with different CSS units to get the layout just right. But instead of guessing, let’s take a proper look at how size units actually work in CSS.

CSS provides two main types of units: Absolute and Relative. Let’s break down what each means and when to use them.

Absolute Units

Absolute units have a fixed size that doesn’t change depending on the screen or parent elements. These are best suited for print-style layouts, but one unit — pixels (px) — is widely used on screens as well.

Here’s a list of common absolute units:

cm – Centimeters
1cm ≈ 37.8px
mm – Millimeters
(smaller than cm, used less often)
in – Inches
1in = 96px = 2.54cm
pt – Points
1pt = 1/72 of an inch
pc – Picas
1pc = 1/6 of an inch
px – Pixels
1px = 1/96 of an inch

This is the most used unit for defining element sizes on screens.

Relative Units

Relative units are flexible — they adjust based on the parent element or the screen size. This makes them ideal for building responsive layouts.

Let’s go over them:

em – Scales relative to the font size of the parent element.
Example: 5em means 5 times the current font size.
ex – Based on the x-height of the font (the height of the lowercase “x”).
ch – Depends on the width of the character “0” in the current font.
rem – Relative to the root element’s font size (usually the <html> element).
vw – Represents 1% of the viewport’s width (the visible browser width).
vh – Represents 1% of the viewport’s height (the visible browser height).
% – Refers to the size of the parent element.
For example, width: 50% would take up half the width of its container.

Other CSS Metrics

Besides sizing, you’ll also come across the following values in CSS:

Opacity – Controls transparency.
Accepts values from 0 (fully invisible) to 1 (fully visible).
RGB & RGBA – Used for color.
Red, Green, Blue values range from 0 to 255.
RGBA includes an alpha channel for opacity.
HSL & HSLA – Another color format.
Hue values range from 0 to 360. Saturation and Lightness are in percentage.
HSLA includes an alpha channel for transparency.