HTML and CSS Reference
In-Depth Information
Points (
pt
)
Points are standard typographical measurements that have been used by printers
and typesetters for decades and by word processing programs for many years. Tra-
ditionally, there are 72 points to an inch (points were defined before widespread
use of the metric system). Therefore, the capital letters of text set to 12 points
should be one-sixth of an inch tall. For example,
p {font-size
:
18pt;}
is equivalent
to
p {font-size
:
0.25in;}
.
Picas (
pc
)
Picas are another typographical term. A pica is equivalent to 12 points, which
means there are 6 picas to an inch. As just shown, the capital letters of text set to
1 pica should be one-sixth of an inch tall. For example,
p {font-size
:
1.5pc;}
would set text to the same size as the example declarations found in the definition
of points.
Pixels (
px
)
A pixel is a small box on screen, but CSS defines pixels more abstractly. In CSS
terms, a pixel is defined to be the size required to yield 96 pixels per inch. Many
user agents ignore this definition in favor of simply addressing the pixels on the
monitor. Scaling factors are brought into play when page zooming or printing,
where an element
100px
wide can be rendered more than 100 device dots wide.
Of course, these units are really useful only if the browser knows all the details of the
monitor on which your page is displayed, the printer you're using, or whatever other
user agent might apply. On a web browser, display is affected by the size of the monitor
and the resolution to which the monitor is set—and there isn't much that you, as the
author, can do about these factors. You can only hope that, if nothing else, the meas-
urements will be consistent in relation to each other—that is, that a setting of
1.0in
will be twice as large as
0.5in
, as shown in
Figure 1
.
Figure 1. Setting absolute-length left margins
Nevertheless, despite all that, let's make the highly suspect assumption that your com-
puter knows enough about its display system to accurately reproduce real-world meas-
urements. In that case, you could make sure every paragraph has a top margin of half
an inch by declaring
p {margin-top
:
0.5in;}
. Regardless of font size or any other cir-
cumstances, a paragraph will have a half-inch top margin.
Absolute units are much more useful in defining style sheets for printed documents,
where measuring things in terms of inches, points, and picas is much more common.
