Length Values and their Units - An Inquiry Into Values - HTML with Style
An Inquiry Into Values
Length Values and their Units
Length values are used to specify a length in a property. Examples
of their use include the
text-indent properties, where they specify the length
from the baseline of the font to the top of the font and the length of
the indent of the first line respectively.
Length units consist of a number followed by a unit, such as
14pt etc. The number
may be an integer or a real number, and it might be positive or
negative, although some properties limit the range of numbers that can
be used (for instance, you can't have a negative font size). The
various types of units offer a lot of flexibility in specifying
lengths of various quantities. There are two types of units: absolute
and relative units.
Absolute units are the following:
in: inches, one inch = 2.54 centimeters
pt: points, one point = 1/72 of an inch
pc: picas, one pica = 12 points
The user agent is supposed to figure out the actual length of these units depending on the medium used. If it is a printer, this is pretty simple, but on a computer screen, it is not always simple. Many operating systems do have a way of specifying the resolution of the display (usually expressed in dpi, dots per inch), but this is not always possible. Most of the time, however, a reasonable value can be figured. These units are very good for specifying lengths, since a document will usually be displayed in a space of the same approximate proportions.
Also note that the definition of a point used in CSS (1/72 of an inch) is not in agreement with all of the publishing world, but still it is the one used in CSS. Publishers have various different definitions of a point, and the matter of which is more correct is quite a long debate, but this is the value used in CSS, so you shouldn't have to worry about it too much.
There are three types of relative units:
em refers to the font height of the element. So,
text-indent: 2em means make the indent
equal to twice the font height. The only exception to this rule is
when ems are used to specify the font size itself, in which case they
refer to the inherited font size, so
1.2em is equivalent to
120%. Ems are probably the most useful unit in CSS, because
they give an indication of how much space the document is
occupying. Font sizes will always be at a readable size, so you can
scale other measurements (such as margins) to match the size that your
viewer is comfortable.
ex is equal to the font's "x-height," which is normally
defined as the height of the character
x. This value is defined
even if the font doesn't have an
x character, and is an
approximate indication of the height of characters without ascenders
or descenders. In many traditional fonts, an em is about one and a
half ex, but this can vary greatly depending on the font. Some more
unusual fonts might have very small ex values compared to font
size. Note that these definitions, much like the definition of the
point, will probably launch several publishers into a day-long debate
if you ever mention them, but they work in CSS and these are the ones
browsers should use.
px is a pixel, but it is not an absolute length. In a
computer display, a pixel should correspond to one physical pixel on
the screen, but when, for instance, printing a document, pixels should
be scaled accordingly (since the resolution of a printer is typically
much higher than that of a computer screen, and lengths measured in px
would be tiny). Still, it is generally a bad idea to use
length measurements in CSS, since the resolution of the medium the
user is using can vary greatly. A length measured in px will be very
different for someone using a 15" monitor at 1024x768 resolution than
to someone using a 21" monitor at 640x480 resolution, while other
units will scale well to what the user expects.
As with percentages, note that all elements inherit the computed values of their parents, not the specified relative values.
Certain values also accept integers or real numbers as
values. These can be positive or negative, although many values
restrict the range of values that can be accepted. An example is the
font-weight property, that accepts integer values that
are multiples of 100, ranging from 100 to 900. Another example is the
line-height property, that accepts positive real
Every property may have a value of
indicates that the element should inherit this property from its
parent. This is normally the default for inherited properties, but the
inherit value applies to non-inherited properties as
well, so you can force a property to be inherited.