HTML and CSS Reference
In-Depth Information
Dimensions and other measurements, such as
font-size
, are not just
raw numbers but a number of some specified of units of measure. CSS
has quite a variety of measurement units; the most commonly used are
outlined in the following sections.
img.thumbnail { width:
150px
; }
div { border-width:
3px
; }
A pixel unit (
<length>
) is a fixed measurement based on the size of a
common pixel.
note
Pixel units are not always a “pixel” or “dot” but are defined as
a relative length measurement based on the given display. High-
resolution media such as print will output
1px
as multiple physical dots, and
high-resolution devices such as the 326-dpi iPhone 4 will render a
px
unit at
an appropriate size.
h1 { font-size:
1.6em
; } /* make h1 font larger than base */
blockquote { width:
20em
; } /* keep block readable */
One em unit (
<length>
) is a relative unit that equates to the font size of
the element. When applied to the
font-size
property of an element, an
em unit is relative to the parent element's font size. This behavior makes
it useful for keeping the font size for emphasis, headers, and other tags
relative to the base font sizing. It's also useful when applied to dimen-
sions as a way to control readability and line lengths.
