CSS Units

·

2 min read

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.

UnitDescription
cmcentimeters
mmmillimeters
ininches (1in = 96px = 2.54cm)
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)

Relative Lengths

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

UnitDescription
emRelative to the font-size of the element (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to width of the "0" (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport
vhRelative to 1% of the height of the viewport
vminRelative to 1% of viewport's smaller dimension
vmaxRelative to 1% of viewport's larger dimension
%Relative to the parent element

Reference:
w3schools.com/cssref/css_units.asp

Did you find this article valuable?

Support Weensy Code by becoming a sponsor. Any amount is appreciated!