CSS Measurement Units
CSS Measurement Units are used to define CSS properties value like length units. CSS Measurement Units are important to know because there are different kinds of the unit and all units having different behavior for example length can be expressed in "px", "%", "pt", "cm", etc.
Basically you need to learn different kinds of length units and their behavior with the web-page.
- To expressing length in CSS, there are several length units in CSS.
- To express length unit in CSS by a number followed by length unit for example: 22px, 3em, 27vh, etc.
- While expressing length in CSS, the white space in not allowed between number and length unit for example: 33px is correct BUT '37 px' is incorrect.
- To express negative length in CSS, CSS allows negative length units for example: "-43px", "-57px", etc.
Types of Length Units
Length unit are categorized in two categories based on unit behavior, sometimes need fixed type length, basically, use it where you know the exact value of length and sometimes don’t have an idea of exact length so in this condition you use a different kind of length units.
- Absolute Lengths
- Relative Lengths
Absolute Length Units
It is a fixed kind of length unit, in such a condition where you know the exact required length, then in such a condition, you can use absolute length units.
Absolute length unit does not change according to screen size, direction, or other variation.
- Absolute length units are not recommended for use on-screen.
- Use absolute length unit, if you know what size output you need.
All Absolute Length Unit with Description
All Absolute length Units are listed in below table:
| Length Units |
Description |
| cm |
defines length in centimeters |
| mm |
length unit in millimeters |
| in |
inches (1in = 96px = 2.54cm) |
| px* |
pixels (1px = 1/96th of 1in) |
| pt |
points (1pt = 1/72 of 1in) |
| pc |
picas (1pc = 12 pt) |
Relative Length Units
In such a condition where you don’t know the exact length of the element, then we use relative length units.
The Relative Length Units are more flexible than absolute length because there is no limitation of screen size, direction, or other variation, it automatically adjusts according to variation. The relative length units are defines based on other relative elements length i.e. parent or child elements.
- The relative length is relative to another length property (The child element length is 30% of the parent).
- The relative length units are not fixed type.
All Relative Length Unit with Description
All relative length Units are listed in below table:
| Length Units |
Description |
| % |
Relative to the parent element |
| vw |
Relative to 1% of the width of the viewport |
| vh |
Relative to 1% of the height of the viewport) |
| em |
Relative to the font-size of the element (10em means 10 times the size of the current font) |
| ex |
Relative to the x-height of the current font |
| ch |
Relative to width of the "0" (zero) |
| rem |
Relative to font-size of the root element |
| vmin |
Relative to 1% of viewport's smallest dimension |
| vmax |
Relative to 1% of viewport's largest dimension |
| % |
Relative to the parent element, It is most useful |
NOTE: Some older browers may not support some length units!