CSS has several different units for expressing a length. Many properties take 'length' values, such as height, border, margin, padding, font-size, etc etc. But we all know how confusing these CSS Units are! In this article, I'll try to briefly explain the most common CSS Units.
So basically, there are two types of CSS length units: Absolute and Relative.
Absolute
The absolute length units are fixed and length expressed in these units will appear exactly the same size for all screens. Units like cm, px, in, pc are absolute.
Relative
Relative length units in CSS specify a length relative to another length property. %, em, vh, ch are a few Relative length units. Better responsive sites can be created using Relative length units.
Below is the list of some commonly used CSS Length units with description.
| Name | Unit Type | Decsription |
|---|---|---|
| px | Absolute | 1px = 1/96th of 1in, Pixels (px) are relative to the viewing device |
| in | Absolute | 1in = 2.54cm = 96px |
| pt | Absolute | 1px = 1/96th of 1in |
| rem | Relative | Relative to font-size of the root element |
| em | Relative | Relative to font size of the element |
| vh | Relative | Relative to 1% of the height of the viewport* |
| % | Relative | Relative to the parent element |
Generally, for output purposes, relative units are used and for print, absolute. For example, we don't typically use cm on screen because screen size can vary from device to device.
There are several other units like mm, pc, ch, vmax, vmin, ex, try exploring them and see how it all works. Moreover, As of now, almost all browsers latest version support these units.
That's it for now! Thanks and happy learning :)
Top comments (0)