DEV Community

Cover image for Some Popular CSS Units
Swastika Yadav
Swastika Yadav

Posted on

Some Popular CSS Units

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.

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 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 :)

Discussion (0)