HTML and CSS Reference
In-Depth Information
Measurement
Description
Example
Defines a measurement as a
percentage. Percentages are denoted
by a number followed by the
%
symbol
and are always relative to another value
such as length. Quite often they are
used to specify some value relative
to an inherited value from a parent
element.
%
p {font-size: 14px;
line-height: 150%;}
Defines a measurement in centimeters.
cm
div {margin-bottom: 1cm;}
em
Defines a measurement relative to the
height of a font in em spaces. Because
an
em
unit is equivalent to the size of a
given font, if you assign a font to 12pt,
each
em
unit would be
12pt
, thus
2em
would be
24pt
.
p {letter-spacing: 5em;}
ex
Defines a measurement relative
to a font's x-height. The x-height is
determined by the height of the font's
lowercase letter x.
p {font-size: 14pt;
line-height: 2ex;}
Defines a measurement in inches.
in
p {word-spacing: .25in;}
mm
Defines a measurement in millimeters.
p {word-spacing: 12mm;}
pc
Defines a measurement in picas. A pica
is equivalent to 12 points; thus, there
are 6 picas per inch.
p {font-size: 10pc;}
pt
Defines a measurement in points. A
point is defined as 1/72nd of an inch. A
point does not equate to a pixel unless
there are 72 pixels per inch onscreen.
body {font-size: 14pt;}
px
Defines a measurement in screen
pixels. Surprising to some Web
developers, pixel measurements are
relative, as there may be different pixel
densities on different screens.
p {padding: 15px;}
T
ABLE
5-3
CSS1 and CSS2 Length Measurement Units
N
OTE
There are many other values found in CSS3, such as viewport sizes (
vh
,
vw
,
vm
), root
relative sizing (
rem
), angles [degrees (
deg
), grads (
grad
), and radians (
rad
)], times
[milliseconds (
ms
) and seconds (
s
)], frequencies [Hertz (
Hz
) and kilo Hertz (
kHz
)], and so on.
See Chapter 6 for information on these and other values.
