HTML and CSS Reference
In-Depth Information
TABLE 8.1
Continued
Unit
Measurement
Relative; pixels
px
Absolute; inches
in
8
Absolute; centimeters
cm
Absolute; millimeters
mm
Absolute; points
pt
Absolute; picas
pc
The absolute measurements seem great, except that an inch isn't really an inch when it
comes to measuring things on a screen. Given the variety of browser sizes and resolu-
tions supported, the browser doesn't really know how to figure out what an inch is. For
example, you might have a laptop with a 14.1" display running at 1024 by 768. I might
have a 20" CRT running at that same resolution. If the browser thinks that one inch is 96
pixels, a headline set to
1in
may appear as less than an inch on your monitor or more
than an inch on mine. Dealing with relative units is safer.
In this lesson, I use one length unit:
px
. It's my favorite for sizing most things. However,
other relative units can also be useful. For example, if you want paragraphs on your page
to appear as double spaced, you can specify them like this:
p { line-height: 2em; }
Percentage units are also extremely common. They're written as you'd expect:
200%
(with no spaces). The thing to remember with percentages is that they're always relative
to something. If you set a font size to 200%, it will be double the size of the font it
inherited through CSS, or 200% of the browser's default font size if a font size that has
been applied to that element. If you set a
<div>
's width to 50%, it will be half as wide as
the enclosing element (or the browser window, if there's no enclosing element). When
you use percentages, always keep in mind what you're talking about a percent of.
Using Percentage Units
When you use percentages as units, bear in mind that the percentage applies not
to the size of the page, but rather to the size of the box that encloses the box to
which the style applies. For example, if you have a
<div>
with its width set to 50%
inside a
<div>
with its width set to
500px
, the inner
<div>
will be 250 pixels wide.
On the other hand, if the outer
<div>
were also set to 50%, it would be half as wide
as the browser window, and the inner
<div>
would be 25% of the width of the
browser window.
