CSS: Units

By Xah Lee. Date: . Last updated: .

There are 2 types of length units: “relative” and “absolute”.

Relative Units

Relative units → a length relative to some element's length. (for example, with respect to inherited value or browser default).

5rem
5em
5ex
5ch
5%

The default font size in browsers is 16px. That is, by default, 1rem is 16px.

Absolute Units

Absolute units → fixed in relation to each other.

1cm
10mm
2.54cm
1in
72pt
6pc
96px

There are 2 types of absolute units.

Relative Units

unitmeaning
emLength equal to the current font size. (see detail below) (Note: it is NOT the width of “M”.)
exA font's “x-height”, usually the height of the letter x. Typically about half of em.
rem (CSS3)Length equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property's initial value.
ch (CSS3)Length roughly equal to the width of the 0 (ZERO) character in the current font. Roughly half of em.

The length of em is:

Note: Child elements do not inherit the relative values specified for their parent; they inherit the computed values. 〔►see CSS: What's Computed Style?

The ch unit is from CSS3, and is not widely supported.

[“ch” is] Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. In the cases where it is impossible or impractical to determine the measure of the “0” glyph, a value of 0.5em must be assumed.

from http://dev.w3.org/csswg/css-values/#font-relative-lengths as of

Syntax and basic data types#length-units

For font sizing, the best unit is em or rem. Don't use pt or pc.

Sample use:

div.xyz {margin:.5em;width:550px;height:90px}

Percent Value

Note: for properties that requires a length, you can also use %. As in width:5%. But it's not technically a unit.

Meaning of percent value is dependent on the specific property.

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block).

When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Syntax and basic data types#percentage-units

Absolute Length Units

Absolute Length Units have fixed ratio to each other.

unitmeaningconversion
cmcentimeter. 10 mm~0.3937 inch; ~37.795 px
mmmillimeter. 0.1 cm~3.78 px
unitmeaningconversion
inInch. 6 pc. 72 pt. 96 px.2.54 cm
pc1/6 inch. 12 pt. 16 px. “pc” stands for “pica”.~0.423 cm
pt1/72 inch. (~0.0138 inch) ~1.33 px. “pt” stands for “point”.0.3527 mm
unitmeaningconversion
pxA “reference pixel”. Equivalent to 0.75pt. (or, think of 96dpi screen.)0.2645 mm

If absolute Length Units have fixed ratio to each other, then it's circular, what's their actual length?

CSS spec says it depends.

Here's the CSS 2.1 spec. Syntax and basic data types#length-units, quote:

For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

For detail about pixel, see: CSS: What's a CSS Pixel? What's Reference Pixel?.

Units like cm is useful for specifying printed style. For example:

@media print {
    table {font-size: 4 cm}
}

thanks to Brennan Young

〔►see CSS: Media Query (Responsive Design)

What's CSS's Default Unit?

CSS doesn't have a default unit. Omitting unit does not default to px. See: What's CSS's Default Unit?

CSS3 Units: root em 「rem」 and viewport width 「vw」

CSS3 introduced the unit rem, which stand for “root em”. It is the size of font relative to root. (em is size of font relative to parent element.)

as of , all latest versions of browsers support it. (not Internet Explorer 8 or before.)

CSS3 also has vw and others.

unitmeaning
vwEqual to 1% of the initial containing block (the view port). it does NOT include the scrollbar width. When browser window changes size, vw also changes.
vhEqual to 1% of the height of the initial containing block.
vminEqual to the smaller of vw or vh.
vmaxEqual to the larger of vw or vh.

These units are not fully supported by IE11 as of

http://dev.w3.org/csswg/css-values/#font-relative-lengths

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.