HTML and CSS Reference
In-Depth Information
The last two examples, 0px and 0 , mean the same. Most experienced designers omit the px (or other length
unit) but it's perfectly valid to include it. The following examples are incorrect and will not work :
0.5 em
300 px
0 px
Although no unit is required after zero, browsers are likely to interpret the px in the final example as garbage
and ignore the style definition.
An em is a unit of measurement borrowed from typography. The name originates from the width of the letter
M; but in CSS it means the height of the current font, usually including whitespace above and below. So, with a
16-pixel font, one em equals 16 pixels; with a 24-pixel font, it's 24 pixels, and so on. Specifying the width or height
of an element in ems adjusts its size in proportion to the size of the font.
Using em to specify font size can result in ever shrinking text because nested elements inherit the size
from their parents, resulting in a multiplier effect. for example, if you set the font size of unordered lists to 0.75em
(the equivalent of 12px ), the text in a nested list is 0.75 times the size of its parent—in other words, 9px . At the next
level, the text shrinks even further (see figure 3-1 ).
Figure 3-1. Using em to set the font size can have unexpected results with nested elements
To avoid this multiplier effect with em , you need to reset the size for nested lists to 1em like this:
ul {
font-size: 0.75em;
ul ul {
font-size: 1em;
As Figure 3-2 shows, this sets the text in the nested lists to the same size as the previous list, thereby
preventing it from shrinking.
Search WWH ::

Custom Search