CSS Units Explained! Learn The Use of Different Length Units

Absolute Lengths:

these are not relative to anything else, and are generally considered to always be the same size.

px - Pixels (1px = 1/96th of 1in). Fixed length

cm - Centimeters (1cm = 37.8px = 25.2/64in).

in - Inches (1in = 2.54cm = 96px).

pt - Points (1pt = 1/72nd of 1in).

mm - Millimeters (1mm = 1/10th of 1cm).

pc - Picas (1pc = 1/6th of 1in)

Relative Lengths:

The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

em - Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

rem - This unit sets the size relative to font-size of the root element, typically the HTML element itself.

vw - 1% of the viewport's width. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change.

vh - It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the 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.

% - A percentage value is always set in relation with another value. For example, when a percentage value is passed as height or width of an element, it will be calculated as percentage of the height or width of the parent element.

ch - This unit sets the size relative to width of the "0" (zero) character in the chosen font. It is primarily used to create responsive designs that scale with the font size.