Units in CSS
Values are regularly used in CSS. These are specified sometimes in absolute units and at other times in relative units.
CSS provides units for length, angle, frequency and within each category it supports conversion between the different units of measurement.
It is good to have an understanding of the various units or measurement that CSS supports. This allows web developers and designers to work within their comfortable zones.
Below is a list of units supported in CSS.
Absolute Units
Length
cm, mm, Q, in, pt, pc, px
| Unit | Name | Equivalent to |
|---|---|---|
| cm | Centimeters | 1cm = 37.8px = 1/2.54 of 1in |
| mm | Millimeters | 1mm = 1/10 of 1cm |
| Q | Quarter-millimeters | 1Q = 1/40 of 1cm |
| in | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6 of 1in |
| pt | Points | 1pt = 1/72 of 1in |
| px | Pixels | 1px = 1/96 of 1in |
Angles
deg, grad, rad, turn
| Unit | Name | Equivalent to |
|---|---|---|
| deg | Degree | 360deg = 1 full circle |
| grad | Gradian | 400grad = 1 full circle |
| rad | Radian | 6.2832rad = 1 full circle (π approx = 3.1416) |
| turn | Turn | 1 turn = 1 full cirle |
Time
s, ms
| unit | name | equivalent to |
|---|---|---|
| s | second | 1s = 1000ms |
| ms | millisecond | 1ms = 1/1000 of 1s |
Frequency Units
Hz, kHz
| unit | name | equivalent to |
|---|---|---|
| Hz | Hertz | 1Hz = 1/1000 of 1 kHz |
| kHz | Kilo Hertz | 1KHz = 1000Hz |
Resolution Units
dpi, dpcm, dppx
Relative Units
As the name suggests, these values provided with these units are relative to some other value. It could be related to some parent element or the viewport.
Font Related
em, ex, ch, rem
Viewport Related
%, vw, vh, vmin, vmax
Container Query Related
cqw, cqh, cqi, cqb, cqmin, cqmax
Note
It is common practice to define an absolute value to the container element and then use relative values for all descendant elements.
Top comments (1)
informative