CSS values and units
units
css units
The numeric type you will come across most frequently is <length>. For example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.
Absolute length units
The following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.
| Unit | Name | Equivalent to |
|---|---|---|
cm | Centimeters | 1cm = 37.8px = 25.2/64in |
mm | Millimeters | 1mm = 1/10th of 1cm |
Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
in | Inches | 1in = 2.54cm = 96px |
pc | Picas | 1pc = 1/6th of 1in |
pt | Points | 1pt = 1/72th of 1in |
px | Pixels | 1px = 1/96th of 1in |
Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).
Relative length units
Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.
| Unit | Relative to |
|---|---|
em | Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. |
ex | x-height of the element's font. |
ch | The advance measure (width) of the glyph "0" of the element's font. |
rem | Font size of the root element. |
lh | Line height of the element. |
vw | 1% of the viewport's width. |
vh | 1% of the viewport's height. |
vmin | 1% of the viewport's smaller dimension. |
vmax | 1% of the viewport's larger dimension. |