Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Measurements

CSS supports an impressive range of different units of measurement, enabling you to tailor your web pages precisely to specific values, or relative dimensions. The ones I generally use (and believe you will also find the most useful) are pixels, points, ems, and percent, but here’s the complete list:

Pixels

The size of a pixel varies according to the dimensions and pixel depth of the user’s monitor. One pixel equals the width/height of a single dot on the screen, so this measurement is best suited to monitors. For example:

.classname { margin:5px; }

Points

A point is equivalent in size to 1/72 of an inch. The measurement comes from a print design background and is best suited for that medium, but it is also commonly used on monitors. For example:

.classname { font-size:14pt; }

Inches

An inch is the equivalent of 72 points and is also a measurement type best suited for print. For example:

.classname { width:3in; }

Centimeters

Centimeters are another unit of measurement best suited for print. One centimeter is a little over 28 points. For example:

.classname { height:2cm; }

Millimeters

A millimeter is 1/10th of a centimeter (or almost 3 points). Millimeters are another measure best suited to print. For example:

.classname { font-size:5mm; }

Picas

A pica is another print typographic measurement, which is equivalent to 12 points. For example:

.classname { font-size:1pc; }

Ems

An em is equal to the current font size and is therefore one of the more useful measurements for CSS since it is ...