CSS Units

Learn about CSS length units, like absolute (cm, mm, px, in, pt, pc) and relative (em, rem, vh, vw, %), along with time (s, ms) and angle (deg, grad, turn) units for animations and transforms.

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Some properties of CSS allow the negative values of length.

The length unit in CSS is of two types:

Absolute length.
Relative length.

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit	Name	Explanation
`cm`	Centimeters	It is used to define the measurement in centimeters.
`mm`	Millimeters	It is used to define the measurement in millimeters.
`in`	Inches	It is used to define the measurement in inches. 1in = 96px = 2.54cm
`pt`	Points	It is used to define the measurement in points. 1pt = 1/72 of 1 inch.
`pc`	Picas	It is used to define the measurement in picas. 1pc = 12pt so, there 6 picas is equivalent to 1 inch.
`px`	Pixels	It is used to define the measurement in pixels. 1px = 1/96th of inch

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit	Name
`em`	It is relative to the font-size of the element.
`ex`	It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'.
`ch`	It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero).
`rem`	It is the font-size of the root element
`vh`	It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.
`vw`	It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of 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.
`%`	It is used to define the measurement as a percentage that is relative to another value.

Other time of units

Time

Some animation properties require values to express in time

Unit	Explanation
`s`	It is the duration of time in seconds.
`ms`	It is the duration of time in milliseconds. 1ms = 1/100 of a second

Angles

The transform properties in CSS require values to express in angles

Unit	Explanation
`deg`	It expresses the angles in degrees.
`grad`	It expresses the angles in gradians, i.e., 1/400 of a turn.
`turn`	It expresses the angles in turns, i.e., 360 degrees.