HTML and CSS Reference
In-Depth Information
Instead of calculating their value based on the element's
font-size
value, rem units cal-
culate their value based on the
font-size
value set on the root element (hence "rem," or
"root em"). In all HTML pages, the root element is the
<html>
element. So whatever font
size is defined on that element (or whatever value the browser assigns to it by default), will
be equal to a single rem unit.
To understand this a little better, refer back to
Table 3.1
from the previous section on em
units. All the values in the chart remain the same. In the case of em units, the top row of
pixel values represents the font-size value for the element on which the ems are applied. But
when using rem units, the top row of pixel values would represent the font-size value for the
<html>
element of the page on which the rems are applied.
The last point to mention here is that browser support for rem units is very good, but not per-
fect. Older versions of Internet Explorer (versions 6-8) do not support rem units. So if you
are developing a website that has a large number of Internet Explorer users, you may want to
avoid using rems and stick with ems or pixels instead.
Percentages
A percentage unit is defined using the
%
character. Percentage values are always relative to
another value on the element itself or on a parent element, which can sometimes make them
appear confusing. For example, in the case of the
.box
element in the rule set shown, the
40%
value will be 40% of the width of the immediate parent element:
.box {
width: 40%;
}
So if this
.box
element is inside an element that is 500px wide, then the
.box
element's
width will be equal to 200px (which is 40% of 500px). If there is no set width on the contain-
ing element, then the
40%
will represent 40% of whatever the width happens to equal within
the browser window.
Figure 3.7
might help you understand this.
