Length Units

CSS allows measurements to be specified in a variety of units. Some of the units (such as em and pica) are taken from the traditional print publishing world. When specifying lengths, keep the following in mind:

  • Do not add space between the number and the two-letter unit abbreviation. It must be 24px, not 24 px.

  • The only value that does not require a unit abbreviation is 0 (zero).

  • Measurements may contain decimal fractions, such as 14.5cm.

  • Some properties, such as margins, accept negative values: margin: -500px

Table 16-1 lists units of measurements that you can specify in style sheet values.

Table 16-1. Units of measurements for style sheet values

Code

Unit

Description

px

Pixel

Pixel units are relative to the monitor resolution.

pt

Point

A traditional publishing unit of measurement for type. In CSS, a point is equal to 1/72 of an inch.

pc

Pica

A traditional publishing unit of measurement equal to 12 points (or 1/6 of an inch).

em

Em

A relative unit of measurement that traditionally equals the width of the capital letter “M” in the current font. In CSS, it is equal to the point size of the font (e.g., an em space in 24pt type is 24 points wide) and is used for both vertical and horizontal measurements.

ex

Ex

A relative unit of measurement that is the height of the lowercase letter “x” for that font (approximately half the length of an em).

in

Inches

Standard unit of measurement in the U.S.

mm

Millimeters

Metric measurement.

cm

Centimeters

Metric ...

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.