CSS units

CSS units
Remacle Jean-Claude
2 minutes
2021-06-05
css
nice to know

There is more then one way to define a lenght in CSS.
Al the different units are split up in two groups, absolute and relative lenghts.

Absolute lengths

Absolute length units are fixed.
When you expresse a lenght in one of these, then it will appear as exactly that size.

 UnitDescription
 mm milimeters
 cm centimeters
 in inches (1in = 96px = 2.54cm)
 px pixels (1px = 1/96th of 1in)
pixels are relative to the viewing device
 pt points (1pt = 1/72 of 1in)
 pc picas (1pc = 12 pt)

Relative lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

UnitDescription 
% Relative to the parent element 
ch Relative to the width of the "0" (zero)
em Relative to the font-size of the element (2em means 2 times the size of the current font) 
ex  Relative to the x-height of the current font (rarely used) 
rem  Relative to font-size of the root element 
vh  Relative to 1% of the height of the viewport 
vmax Relative to 1% of viewport's larger dimension 
vmin Relative to 1% of viewport's smaller dimension
vw Relative to 1% of the width of the viewport