CSS Length Units

Beginner
8 min read
Updated: Nov 2026
4 examples
px, %, em, rem, vh
CSS length units tutorial preview
Definition

Definition and Usage

A CSS length is a number with a unit. It sets a size: width, height, margin, padding, or font-size. 200px is a length. 50% is a percentage of another size. 2em and 2rem follow a font size. 10vh is one tenth of the viewport height, and 10vw is one tenth of the viewport width.

Absolute lengths do not depend on another element: px, cm, mm, Q, in, pc, and pt. px is the one you use on screen. The others show up more often in print. Relative lengths are calculated from something else. % follows the parent. em and rem follow a font size. vw, vh, vmin, and vmax follow the viewport.

A length other than 0 needs a unit.

width: 200 is invalid. width: 200px is a length. 0 is allowed without a unit because zero is zero in every unit.

Syntax

CSS Syntax

The unit is written against the number, with no space:

CSS
.fixed {
  width: 200px;     /* absolute: stays 200px */
}

.half {
  width: 50%;       /* half of the parent width */
}

.grow {
  font-size: 2em;   /* twice the parent font size */
}

.root {
  font-size: 2rem;  /* twice the root font size */
}

.wide { width: 10vw; }  /* 10% of the viewport width */
.tall { height: 10vh; } /* 10% of the viewport height */
Reference

Core Ideas

The lengths a CSS length tutorial uses first:

IdeaExampleRemember
Absolute200pxThe parent’s size does not change it
Pixel1px1/96 of an inch in CSS
Percent50%Half the parent, for width
em2emOn font-size, twice the parent. Nesting compounds
rem2remTwice the root. Nesting stays the same
vw10vw10% of the viewport width
vh10vh10% of the viewport height
vmin10vmin10% of the smaller side, width or height
vmax10vmax10% of the larger side, width or height

Absolute length units

These seven units are all absolute. 1px is 1/96 of an inch in CSS. On a dense screen that pixel can cover more than one physical pixel.

UnitNameEquals
pxPixels1/96 of an inch
inInches96px
cmCentimeters37.8px
mmMillimeters1/10 of 1cm
QQuarter-millimeters1/40 of 1cm
pcPicas1/6 of 1in
ptPoints1/72 of 1in
Code

CSS Examples

Four lengths. View Output shows the size the browser computes. Try It Yourself opens the same example in the editor.

Example 1 — A fixed width in px

width: 200px is an absolute length. The box stays 200px wide inside a larger parent.

CSS
.box {
  width: 200px;
}
Try It Yourself

How It Works

  1. 200px is 200 CSS pixels. 1px is 1/96 of an inch in CSS.
  2. The dashed parent is wider. The blue box does not stretch to fill it.
  3. A wider page leaves the 200px box the same width.

Example 2 — Half the parent with %

width: 50% is half of the parent’s width. Inside a 320px parent, the child is 160px.

CSS
.parent {
  width: 320px;
}

.child {
  width: 50%;
}
Try It Yourself

How It Works

  1. The parent is 320px wide, or as wide as the page allows.
  2. 50% takes half of that width. It is not half of the viewport.
  3. A wider parent makes the same 50% child wider.

Example 3 — em compounds, rem does not

On font-size, 2em is twice the parent. A nested 2em doubles again. 2rem is twice the root, so nesting does not change it.

CSS
.em { font-size: 2em; }
.rem { font-size: 2rem; }
Try It Yourself

How It Works

  1. The wrapper is 16px. The first 2em is 32px.
  2. The nested 2em is twice that parent, so 64px.
  3. Both 2rem lines use the root font size. They match each other.

Example 4 — vh for height, vw for width

height: 10vh is 10% of the viewport height. width: 10vw is 10% of the viewport width. Neither one follows the parent.

CSS
.wide {
  width: 10vw;
}

.tall {
  height: 10vh;
}
Try It Yourself

How It Works

  1. 1vh is 1% of the viewport height. 10vh is one tenth of the window.
  2. 1vw is 1% of the viewport width. 10vw is one tenth of the window.
  3. vmin uses the smaller of those two sides. vmax uses the larger one. Resize the window and all four change. In Try It Yourself, the preview pane is the viewport.

Frequently Asked Questions

A length is a number with a unit, used for width, height, margin, padding, and font-size. Absolute lengths are px, cm, mm, Q, in, pc, and pt. Relative lengths are calculated from something else: % from the parent, em from a font size, rem from the root, and vw, vh, vmin, and vmax from the viewport.
px is an absolute length. 1px is 1/96 of an inch in CSS, so 200px is a fixed width. It does not grow when the parent grows. On a high-density screen, 1px may cover more than one physical pixel, and the size is meant to look similar at a normal viewing distance. cm, mm, Q, in, pc, and pt are absolute too. On screen, px is the one you write.
On font-size, em is a multiple of the parent font size. A nested 2em is twice the already enlarged parent, so the sizes compound. rem is always a multiple of the root font size. Nested 2rem stays the same size as the first 2rem.
For width, a percentage is a share of the parent’s width. A child with width: 50% inside a 320px parent is 160px wide. The same 50% inside a wider parent is wider. It is not 50% of the viewport.
1vh is 1% of the viewport height, the browser window’s height. 1vw is 1% of the viewport width. 10vh is one tenth of the window height, and 10vw is one tenth of the window width. They follow the window, not the parent. Resize the window and the box changes.
1vmin is 1% of the smaller viewport side. If the window is wider than it is tall, vmin follows the height, the same side as vh. 1vmax is 1% of the larger side. If the window is wider than it is tall, vmax follows the width, the same side as vw.

Next: At-Rules

Write @media, @import, and the other at-rules.

At-rules tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

CSS Flexbox CSS At-Rules