Derived from Other Relative Values
Description
You can use relative units to express a multiple of another relative measure.
Example
The following example shows the height property is expressed in em units.
The em units are derived from the value of the font-size property,
which is expressed using rem units.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html {<!-- ww w . ja va2 s . c om-->
font-size: 0.2in;
}
p {
background: grey;
color:white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size:14pt">
<a href="http://java2s.com">website</a>
<p>This is a test.</p>
<a href="http://w3c.org">W3C</a>
</body>
</html>
The above example assigns an absolute font size of 0.2 inches.
The rem unit is relative to the font size
of the html element,also known as the root element.
The font-size value 2rem
means that the font size will be twice the size of the root element font-0.4 inches.
The height property in the same style is specified as 2em,
which is twice as much again. This means the browser will display p
elements using a font that is 0.4 inches high and the overall element will be 0.8 inches high.
Another font-related relative unit is ex,
and 1ex is approximately 0.5em.