There are many properties in CSS that are assigned a value such as length, size, width, or height. In CSS, you express these values using one of many types of units of measurement.
CSS provides you with nine units with which to define the value of properties that require some sort of measurement. You should note that you can use each of these units to define the size of anything, even if the unit itself is derived from a font’s size.
You’ll have to decide for yourself which elements should be sized using which units, but there is nothing preventing you from sizing elements using whichever measurement type you choose.
Absolute Measurement
| Unit | Description | Example |
|---|---|---|
in | inches | text-indent: 1in |
cm | centimeters | margin-bottom: 5cm |
mm | millimeters | word-spacing: 10mm |
pt | points (72 points = 1 inch) | font-size: 18pt |
pc | picas (12 points = 1 pica) | font-size: 2pc |
Relative Measurement
| Unit | Description | Example |
|---|---|---|
% | percentage | line-height: 150% |
em | 1em is equal to the current font size | letter-spacing: 5em |
ex | relative to a font’s x-height. | line-height: 3ex |
px | pixels | padding: 20px |
Point, Pica, Inch, Centimeter, and Millimeter
These units are typically used for printing. A point (1pt) equals 1/72 of an inch, while a pica (1pc) equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the size is for these units.
Digital displays (your monitor), will have to estimate how to convert these units into pixels. Documents designed to be displayed on the web should avoid using these units.
Pixel
Pixels define an element’s size using a specific number of pixels. This is very convenient when designing for displaying information on digital monitors since it gives you exact control over the size of the element.
There are several disadvantages to using pixels you should note. Setting a font’s size using pixel units does not allow the user to resize that font using their browser.
When you set a font’s size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size. Printing a document with sizes set in pixels may appear slightly differ from printer to printer since a pixel has no real size.
Percentage
When assigning percentage units to a property that is not a font-size or line-height, that value always relates to the parent block of that element, such as when assigning the width property, for example.
When assigning percentage units to the font-size or line-height properties, they act like the em unit, where 100% equals 1em.
Em
When ems are used in CSS, the em represents either the user’s default font size or the size of the parent element’s font size. Ems are set to decimal units, such as 0.9, 1em, 1.1em, etc.
These units can be thought of as percentages of the parent element or default font size, where 1.1 would equal 110%.
Ex
An ex is similar to an em, as an em is also a relative unit of measurement that defines 1 unit to be equal to the size of the letter “x” in the default font size.
Please note that most browsers do not support this unit of measurement so using this unit should be avoided for use in web pages.
