CSS Units

Jakob Jenkov
Last update: 2014-08-11

When specifying dimensions of elements, font sizes, border widths etc. in CSS you will usually use some kind of unit to specify how the numeric dimension is to be interpreted. For instance:

p {
    font-size: 18px;
}

This example uses px (pixels) as unit for the font-size property. That means that the 18px means 18 pixels.

CSS contains a set of different units you can use depending on your needs. Here is a list of the available CSS units:

Unit	Description
`px`	Pixels
`%`	Percentage of parent element's dimension (or browser window dimension for `body` element), e.g. 25%
`em`	Dimension is based on standard font size in the browser. 1.0em = standard size.
`cm`	Centimeters
`mm`	Millimeters
`in`	Inches
`pt`	Point - equal to 1/72 of an inch (because of the previous standard for computer monitors was 72 dpi).
`pc`	Pica - equal to 12 points.

Next: CSS Colors

Tweet
	Jakob Jenkov