HTML and CSS Reference
In-Depth Information
As of mid-2012, these units are only used in the context of media queries. As an ex-
ample, an author can set a media block to be used only on displays that have higher
than 500dpi:
@media (min-resolution: 500dpi) {...}
Interestingly, dppx is not defined by the Media Queries module, but appears in the Units
and Values modules alongside dpi and dpcm , which are defined in Media Queries. What
this means for the future is by no means clear.
Relative Length Units
Relative units are so called because they are measured in relation to other things. The
actual (or absolute) distance they measure can change due to factors beyond their con-
trol, such as screen resolution, the width of the viewing area, the user's preference
settings, and a whole host of other things. In addition, for some relative units, their size
is almost always relative to the element that uses them and will thus change from ele-
ment to element.
em and ex units
First, let's consider em and ex , which are closely related. In CSS, one “em” is defined to
be the value of font-size for a given font. If the font-size of an element is 14 pixels,
then for that element, 1em is equal to 14 pixels.
Obviously, this value can change from element to element. For example, let's say you
have an h1 with a font size of 24 pixels, an h2 element with a font size of 18 pixels, and
a paragraph with a font size of 12 pixels. If you set the left margin of all three at 1em ,
they will have left margins of 24 pixels, 18 pixels, and 12 pixels, respectively:
h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;}
small {font-size: 0.8em;}
<h1>Left margin = <small>24 pixels</small></h1>
<h2>Left margin = <small>18 pixels</small></h2>
<p>Left margin = <small>12 pixels</small></p>
When setting the size of the font, on the other hand, the value of em is relative to the
font size of the parent element, as illustrated by Figure 3 .
Figure 3. Using em for margins and font sizing
Search WWH ::

Custom Search