CSS uses many different types of measurement units to use in the HTML document. The units are a requirement for CSS to measure the length. They are used to set margins, padding, etc.
There are two type of CSS units
- Absolute length
- Relative length
1. Absolute length
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. The absolute length sizes are not relative to anything else and are considered to always be the same size. Absolute length units are not recommended for use on-screen, because screen sizes vary so much.
| Unit | Name | Equivalent to |
| cm | Centimeters | 1cm = 25/64in |
| mm | Millimeters | 1mm = 1/10cm |
| in | Inches | 2.54cm |
| px* | Pixels | 1px = 1/96 of 1in |
| pt | Points | 1pt = 1/72 of 1in |
| pc | Picas | 1pc = 12pt |
2. Relative length
Relative length units specify a length relative to another length property. These units scale better between different rendering mediums. The em and rem units are practical in creating a perfect scalable layout. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.
| Unit | Equivalent to |
| em | Relative to the font-size of the element |
| ex | Relative to the x-height of the current font |
| ch | Relative to the width of the “0” |
| rem | Relative to the font-size of the root element |
| vw | Relative to the 1% of the width of the viewport |
| vh | Relative to the 1`% of the height of the viewport |
| vmin | Relative to the 1% of viewport smaller dimension |
| vmax | Relative to the 1% of the viewport of larger dimension |
| * | Relative to the parent element |
Share this post, if you have liked it & thanks for scrolling. CSS units are great if you use them wisely.
You can read our other blogs here
Awesome article.
Thank you 🙂