CSS Units
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
Some properties of CSS allow the negative values of length.
The length unit in CSS is of two types:
- Absolute length.
- Relative length.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
| Unit | Name | Explanation |
|---|---|---|
| cm | Centimeters | It is used to define the measurement in centimeters. |
| mm | Millimeters | It is used to define the measurement in millimeters. |
| in | Inches | It is used to define the measurement in inches. 1in = 96px = 2.54cm |
| pt | Points | It is used to define the measurement in points. 1pt = 1/72 of 1 inch. |
| pc | Picas | It is used to define the measurement in picas. 1pc = 12pt so, there 6 picas is equivalent to 1 inch. |
| px | Pixels | It is used to define the measurement in pixels. 1px = 1/96th of inch |
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
| Unit | Name |
|---|---|
| em | It is relative to the font-size of the element. |
| ex | It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'. |
| ch | It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero). |
| rem | It is the font-size of the root element |
| vh | It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport. |
| vw | It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport |
| vmin | It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension. |
| vmax | It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension. |
| % | It is used to define the measurement as a percentage that is relative to another value. |
Other time of units
Time
Some animation properties require values to express in time
| Unit | Explanation |
|---|---|
| s | It is the duration of time in seconds. |
| ms | It is the duration of time in milliseconds. 1ms = 1/100 of a second |
Angles
The transform properties in CSS require values to express in angles
| Unit | Explanation |
|---|---|
| deg | It expresses the angles in degrees. |
| grad | It expresses the angles in gradians, i.e., 1/400 of a turn. |
| turn | It expresses the angles in turns, i.e., 360 degrees. |