Abakada ~ Back to Basics CSS Attributes
Pixels, points, or percentages ... just which do I use?
Measurements in cascading style sheet properties are made using two types of length units: relative and absolute. The following defines the length units that may generally be supplied for CSS Attributes.
A relative length unit specifies a length in relation to another length property. Relative length units scale better from one output device to another, such as from a monitor to a printer. Percentages and keywords perform similarly.
| Relative length units |
| px |
Pixels. |
| em * |
The height of the element’s font. |
| ex * |
The height of the letter "x". |
| % |
Percentage. |
An absolute length unit specifies an absolute measurement, such as inches or centimeters. Absolute length units are useful when the physical properties of the output device are known.
| Absolute length units |
| pt |
Points ( 1 point = 1/72 inches ). |
| pc |
Picas ( 1 pica = 12 points ). |
| in |
Inches ( 1 inch = 2.54 centimeters ). |
| cm |
Centimeters |
| mm |
Millimeters |
When specifying length units, keep in mind the target display resolution, as differences in user screen settings affect the specified lengths. The following may help to determine which would be appropriate to use, but it all depends on the desired output.
Font-sizes, line-heights, and units that need to render in a fixed size are better specified as absolute lengths (points), unless one intends for them to resize proportionately with different display resolutions.
On the other hand, heights and position coordinates are better off specified as relative lengths (pixels), for them to adjust accordingly. Frames, tables, and most element widths adjust better as percentages, while margins, paddings and border widths scale better when specified as relative lengths (pixels or em).
CSS also provides other length units specific to a CSS property, such as larger or smaller for font-size; bolder and lighter for font-weight; thin, medium, and thick for border-widths, etc. These are discussed in the appropriate CSS attribute sections.
Note that all length units described are supported as of browsers versions 4 and later.
Using StyleSheets W3C Cascading Style Sheet Specification W3C HTML 4.01 Specification