Values, Units, and Colors - Values, Units, and Colors - page 27

That might seem a little nutty, but it's all down to the subtly complex patterns that this
value type has to allow.
If you declare only one value, such as left or 25% , then a second value is set to center .
Thus, left is the same as left center and 25% is the same as 25% center .
If you declare (either implicitly, as above, or explicitly) two values and the first one is
a length or percentage, then it is always considered to be the horizontal value. This
means that given 25% 35px , the 25% is a horizontal distance and the 35px is a vertical
distance. If you swap them to say 35px 25% , then 35px is horizontal and 25% is vertical.
This means that if you write 25% left or 35px right , the entire value is invalid because
you have supplied two horizontal distances and no vertical distance. (Similarly, a value
of right left or top bottom is invalid and will be ignored.) On the other hand, if you
write left 25% or right 35px , there is no problem because you've given a horizontal
distance (with the keyword) and a vertical distance (with the percentage or length).
If you declare four values (we'll deal with three just in a moment), then you must have
two lengths or percentages, each of which is preceded by a keyword. In this case, each
length or percentage specifies an offset distance, and each keyword defines the edge
from which the offset is calculated. Thus, right 10px bottom 30px means an offset of
10 pixels to the left of the right edge, and an offset of 30 pixels up from the bottom
edge. Similarly, top 50% left 35px means a 50 percent offset from the top and a 35-
pixels-to-the-right offset from the left.
If you declare three values, the rules are the same as for four except the last offset is set
to be zero (no offset). Thus right 20px top is the same as right 20px top 0 .
Summary
Units and values cover a wide spectrum of areas, from length units to special keywords
that describe effects (such as underline ) to color units to the location of files (such as
images). For the most part, units are the one area that user agents get almost totally
correct, but it's those few little bugs and quirks that can get you. Navigator 4.x's failure
to interpret relative URLs correctly, for example, has bedeviled many authors and led
to an overreliance on absolute URLs. Colors are another area where user agents almost
always do well, except for a few little quirks here and there. The vagaries of length units,
however, far from being bugs, are an interesting problem for any author to tackle. These
units all have their advantages and drawbacks, depending upon the circumstances in
which they're used.