units of measure
Last update on: 06-23-2008One of the most confusing aspects of CSS is the unit of measure it provides. Four types of units can be specified in CSS: length units, percentage units, color units, and URLs. But we will talk here just about the length and percentage units.
There are two kinds of length units: absolute and relative. Absolute units theoretically correspond to a unit of measure in the real world, such as an inch, a centimeter, or a point. Relative units are based on some more arbitrary unit of measure.
Length Units in CSS:
| Unit | Measurement |
|---|---|
| em | Relative; height of the element's font |
| ex | Relative; height of x character in the element's font |
| px | Relative; pixels |
| in | Absolute; inches |
| cm | Absolute; centimeters |
| mm | Absolute; millimeters |
| pt | Absolute; points |
| pc | Absolute; picas |
The absolute measurements seem great, except that an inch isn't really an inch when it comes to measuring things on a screen. Given the variety of browser sizes and resolutions supported, the browser doesn't really know how to figure out what an inch is. For example, you might have a laptop with a 14.1" display running at 1024 by 768. I might have a 19" CRT running at that same resolution. If the browser thinks that one inch is 72 pixels, a headline set to 1in may appear as less than an inch on your monitor or more than an inch on mine. Dealing with relative units is much safer.
For me and all the time I use pixels px. It's my favorite for sizing most things. However, other relative units can also be useful. For example, if you want paragraphs on your page to appear as double spaced, you can specify them like this:
p { line-height: 2em; }
Layouts with CSS's lessons:
Adding CSS To PagesCSS Selectors
Units Of Measure
Box Properties