The actual size of these units varies as other page properties change. They scale according to the way other elements are being scaled.
 |
Relative Measurements |
| Syntax |
Description |
| em |
The height of the element's font |
| ex |
The height of the letter "x" |
| px |
Pixels (Lower resolution = larger pixels) |
| % |
Percentage (Percentage of containing box) |
It is highly recommended that you use relative units when laying out pages in CSS. Your pages will scale smoothly between many different resolutions,
monitor sizes, and devices. In particular, the em unit is perhaps the most versatile and useful of all the units.
The em unit is so well-liked because it scales relative to the font size. If all the margins, padding, sizes of
elements on a page are based on the font size, then all of these properties will stay in proportion as the size of the font changes.
Another unit that's relative to the font size, the ex, is based upon the height of the letter "x" of the current
font. This unit is not as reliable as the em, however, because two fonts that have the same em size quite
often have a different ex height.
Percentages can be substituted for definite measurements in many instances, and what they are a percentage of
changes depending on the property. In most cases, the percentage refers to the size of the equivalent characteristic of the parent element. e.g.
A font size of 80% means you want it to be 80% of the size of the parent element's font.
Example
P { padding: 1.5em; font-size: 1.2em; border: thin solid black }
Here is a paragraph whose padding is specified as 1.5em. This means that the padding will always be 1.5 times the height of the font contained
within the paragraph, no matter what size the font happens to be.
