CSS values and units


css units

The numeric type you will come across most frequently is <length>. For example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

Absolute length units

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

UnitNameEquivalent to
cmCentimeters1cm = 37.8px = 25.2/64in
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in

Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

Relative length units

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. 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. Some of the most useful units for web development are listed in the table below.

UnitRelative to
emFont 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.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine 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.