ex (the x-height): Ex is the x-height, or height of the lowercase letter x,
of the font of the current element. Browsers usually divide em by half
to get the ex-height. This unit of measurement isn’t currently as useful
as the em because it’s not as predictable an average for all typefaces.
% (percent):Percentages are excellent for specifying relative size (it can
be relative to an ancestor, the parent, and so on).Units of measurement are not case-sensitive. You can capitalize them or not,
as you wish. Likewise, in IE, you can include a space between the number
and its unit, or not: For example, 2 inis equivalent to 2in. Other browsers
don’t like the space. For simplicity, using lowercase and avoiding unneces-
sary spaces is generally a good idea when working with CSS. Just get into the
habit of the 2inor 24pxformat and you’ll be fine, unless the CSS committees
decide to reverse themselves in the future.
Understanding little em ....................................................................
Because experts recommend that you use em when designing a Web page
that you want to look just so, it’s worth taking a closer look at what this unit
actually means. Traditionally, the em was the width of the letter m.
Perhaps you’ve heard the term m-dashor em-dash, which is the dash usually
employed in publishing. It’s a horizontal line — like these — equivalent to the
width of the typeface’s letter m(this isn’t strictly a precise equivalent in
many typefaces). There’s also an en-dash. Guess what it’s based on.
Em and ex units are relative to each typeface. This is useful because it means
that the size specified by em changes in a precise way based on the user’s
monitor resolution, preference settings, and other factors. In other words,
using em allows you to specify what happens relative to the typeface. The
result is proportional to the other qualities of the typeface and surrounding
text. Also, relative specifications like emallow people with handicaps to
enlarge the typeface in their browser as necessary. Fixed specifications like
pxor ptdon’t offer the user this option.
Em and ex are traditional typesetter’s unit of measure, but their meanings in CSS
are slightly modified. For one thing, computers calculate ex by simply dividing
em in half. This is easier to compute, but only an approximation for most fonts.
Em in CSS is the font size in pixels. This is useful because you can specify em
units and rely on them being relative to the parent (or other) element’s font.
Here’s an experiment to get the idea of how em is relative to another element.
In this code, text within the element is defined as 26px, but text within the
paragraph element is defined as 1.5em, or, put another way, one and one-half
times the size of the parent. Later in the HTML code, the paragraph element
is enclosed (parented) by the body element. Therefore, the paragraph text is
rendered at 1.5x26 pixels (or 39 pixels).