Delphinidin

There are two kinds of lengths used in CSS: relative and absolute. Absolute lengths are not dependent on any other measurement. An absolute measurement retains its length regardless of the environment (operating system, browser, or screen resolution of a computer monitor) in which it is applied. Relative lengths, on the other hand, depend on the environment in which they’re used, such as the computer monitor’s screen resolution or the size of a font.

Absolute measurements are defined based on real-world units such as inches, centimeters, points, and so on. These measurements have been used for centuries in the print industry, and one would be accustomed to finding them on a ruler.

- Absolute Measurement
CSS supports a variety of real-world measurements. Each absolute length unit supported by CSS is
defined in the following data.

in | Inches
cm | Centimeters
mm | Millimeters
pt | Points, 1 point is equal to 1/72nd of an inch
pc | Picas, 1 pica is equal to 12 points

Absolute lengths are not intended for the computer screen; they are intended for where a physical
measurement is necessary. For example, printing a document requires real-word measurements.

- Relative Measurement
Relative measurement is better suited for the purpose of onscreen layout. The following data defines the four types of relative measurement that CSS allows.

em | Length relevant to the nearest font size.
ex | The x-height of the relevant font (height of the letter x).
px | Pixels, relative to the viewing device, for example, a computer monitor.
%  | Percentage measurement; how percentage length is calculated depends on what property it is being applied to.

The em and ex units are measured relative to the font size of a document, pixels use the real pixels of the monitor’s screen resolution, and percentage measurement depends on what property it is being applied to. In the coming sections you explore each type of relative measurement in greater detail.

- Pixel Measurements
As you may have guessed from the discussion in this chapter about absolute measurements, pixels, the px measurement, are measured relative to the computer monitor’s settings. This measurement depends on the resolution of the user’s monitor. For instance, a 1px measurement viewed at a resolution of 800 x 600 is larger than a 1px measurement viewed at a resolution of 1024 x 768. Pixel measurements are most useful on the screen; for print it is often better to use absolute measurements or other relative units. Try setting the size of text using pixel values yourself.