CSS: Units of Measurement

CSS: Units of Measurement

ou can measure CSS property values in one of two ways:

  • As an absolute value

  • As a relative value.

Absolute values have a fixed, specific value. They let you, the page creator, be exact in your measurements and control the display of your Web pages.

Example: The font size might be 14 point.

When you are using absolute values always remember that the reader might be viewing your page in a different environment from what you expect.

Relative values have no fixed, specific value. Rather, they are calculated in comparison to a current value.

Example: Type size might be larger, smaller, bolder, or lighter. Indent might be specified in em spaces, which vary with the display size of the text.

Because Web pages are viewed in so many different ways, it is often a good idea to use relative values. It gives you less absolute control but it often creates a better experience for your readers and lets your page flow dynamically.

Absolute Measurement

pointsptfont-size: 12pt
There are 72 points to an inch, 12 points to a pica.
picaspctext-indent: 2pc
There are 6 picas to an inch.
centimeterscmtext-indent: 4cm
inchesintext-indent: 1in
millimetersmmtext-indent: 8cm
Relative Measurement

pixelspxtext-indent: 30px
A pixel is one picture element on the display monitor; there are typically between 72 and 90 pixels/inch.
em spaceemtext-indent: 4em
An em space is the width and height of the capital letter M in the current font size and design.
x spaceexline-height: 3ex
percentage of
parent’s value
XX%font-size: 90%


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist