Units of Measurement

Contact Us or call 1-877-932-8228
Units of Measurement

Units of Measurement

CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available:

Unit Description Example
px Pixels margin-top: 10px;
pt Points font-size: 12pt;
in Inches padding-top: .5in;
cm Centimeters top: 5cm;
mm Millimeters left: 45mm;
pc Picas bottom: 12pc;
em Ems font-size: 1.5em;
ex Exs font-size: 1.5ex;
% Percentage width: 80%;
rem Rems font-size: 1.7rem;

Pixels (px)

The measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user's monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.

Points (pt)

Points should be reserved for print. There are 72 points in an inch.

Inches (in), Centimeters (cm), and Millimeters (mm)

Although these are the most common units of measurement in life, they should be avoided in web design.

Picas (pc)

Picas should be reserved for print. There are 6 picas in an inch.

Ems (em)

An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font. Because em is a relative rather than absolute measurement, it is often used in web design.

Exs (ex)

The "x-height" is the height of font's lowercase "x". Exs are used to set the size of content based on the size of the surrounding font.

Rems (rem)

A rem is a relative unit which is relative to the font-size of the root element (unlike the em, which is relative to the current element); rem is supported by all modern browser, in Internet Explorer from version 9.

Next