CSS Units

CSS Units

CSS Units are a system of measurement used to style webpages and applications. They are used to define the size, position, and other properties of elements on the page.

CSS units are used to specify the size of elements, such as font size, width, height, margins, padding, etc. The most common CSS units are pixels (px), em, rem, percent (%), and viewport units (vw, vh, vmin, vmax). Pixels (px) are fixed-size units that are used for screen resolutions, while em/rem are relative units that are based on the font size of the parent element. Percent (%) is a unit that is relative to the parent element’s size, while viewport units (vw, vh, vmin, vmax) are based on the size of the browser window.

CSS Units are divided into two categories: absolute units and relative units. Absolute units are fixed values, such as pixels, inches, and millimeters. Relative units are relative to the size of the viewport, such as percentages and viewport units.

Absolute Lengths

The following are all absolute length units, they are not relative to anything else and are generally considered to always be the same size.

cmCentimeters   1cm = 96px/2.54
mmMillimeters    1mm = 1/10th of 1cm
QQuarter-millimeters    1Q = 1/40th of 1cm
pxPixels   1px = 1/96th of 1in
pcPicas    1pc = 1/6th of 1in
ptPoints    1pt = 1/72th of 1in
inInches   1in = 2.54cm = 96px

Relative Lengths

Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).

UnitRelative to
emRelative to the font-size of the element (2em means 2 times the size of the current font)
exx-height of the element’s font.
chThe advance measure (width) of the glyph “0” of the element’s font.
remThe font size of the root element.
lhThe line height of the element.
vw1% of the viewport’s width.
vh1% of the viewport’s height.
vmin1% of the viewport’s smaller dimension.
vmax1% of the viewport’s larger dimension.
%Relative to the parent element

Browser Support

Length Unitchrome honar systemsedge honar systemsfire fox honar systemssafari honar systemsopera honar systems
em, ex, %, px, cm, mm, in, pt, pc1.
vh vw20.