CSS units


CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.


Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)

Note: In most cases we use pixels.


Relative Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Most frequently used relative units:

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
rem Relative to font-size of the root element
% Relative to the parent element

Rate this lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.