Extract from SiterPoint article “A Look at Length Units in CSS” by Gajendar Singh
Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself.
Each unit serves its own specific purpose and makes web pages more flexible for a variety of devices. Once you become acquainted with all these units, you will be able to size your elements more precisely. In this tutorial, we will take a look at the different units that are available in CSS and I’ll discuss which units to use in which situations, and how to use them.
Absolute length units
Absolute units are a digital representation of actual measurements in the physical world. These units are not related to the size of the screen or its resolution. As a result, absolute length units are not as well suited for use on digital devices or when the resolution is not known. These units are more appropriate when you are designing for physical media such as print.
Absolute units include:
- cm (centimeters)
- mm (millimeters)
- in (inches)
- pc (picas)
- pt (points)
- px (pixels)
Note that the editor’s draft of the spec also includes the quarter-millimeter (q) unit, but this is new and doesn’t seem to have any browser support.
You might observe that while using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller.
The most widely used of all absolute units is the pixel (px). A pixel is a single dot on the screen. It is the smallest unit of measurement and usually the unit used as a benchmark for the other units.
Other units like inch, millimeter, and centimeter represent the physical size of these units. The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch. Here is some CSS that makes use of the six common absolute units:
p {
border-top: 0.5in solid blue;
border-bottom: 18mm solid green;
border-left: 1cm solid red;
border-right: 40px solid black;
letter-spacing: 0.4pc;
font-size: 20pt;
}