CSS Units

Measurements and positions in CSS properties are indicated in length units. Most browsers support four types of length units: absolute, relative, angle, and time.

Absolute units specify an exact measurement. Relative units specify a length in relation to another property.

The following table lists the CSS units:

The em unit is relative to the calculated value of the font-size attribute of the element.

The px unit is relative to the resolution of the viewing device.

The % unit is relative to another value (eg. a length).

Description

The ch unit is relative to the width of the "0" character in the current font.

The format of this length value is a number followed by ‘ch’.

Examples

This example defines a header with a font size proportional to the width of the "0" character:

h1 { font-size: 8ch }

Browser Support

Miscellaneous Information

Description

centimeter (1cm=10mm)

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the height of the paragraph to 2 centimeters.

p {
  height: 2cm;
  border: 1px solid black;
}

Browser Support

Miscellaneous Information

Description

A deg, or degree, is a CSS angle measurement. The range is 0 to 360deg. Positive degrees go clockwise, negative degrees go counter-clockwise.

The following table lists some common angle measurements:

Examples

This example rotates the image -5 degrees:

.image {
  transform: rotate(-5deg);
}

Browser Support

Miscellaneous Information

Description

An em is a measurement based upon the element's font size. Fractional values are allowed.

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

1em is equal to font size of the parent (same as 100%).

Note: Sizes specified in ems are relative to the parent element. This can lead to the em's "compounding problem" where nested elements get progressively larger or smaller. See rem for information about how to fix this.

Examples

This example sets the paragraph font size to twice the current font's size.

p {
  font-size: 2em;
}

Browser Support

Miscellaneous Information

Description

An ex is a measurement based upon 1/2 the current font size. Fractional values are also allowed.

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

1ex is equal to 1/2 the current font size.
2ex is equal to the current font size.

Examples

This example sets the paragraph font size to 1/2 the current font's size.

p {
  font-size: 1ex;
}

Browser Support

Miscellaneous Information

Description

A grad, or gradian, is a CSS angle measurement and is equivalent to 1/400 of a full circle. A positive grad value goes clockwise, and a negative grad value goes counter-clockwise.

The following table lists some common angle measurements:

Examples

This example rotates the image -50 grad:

.image {
  transform: rotate(-50grad);
}

Browser Support

Miscellaneous Information

Description

inch (1in = 2.54cm)

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the height of the paragraph to 2 inches.

p {
  height: 2in;
  border: 1px solid black;
}

Browser Support

Miscellaneous Information

Description

millimeter

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the height of the paragraph to 20 millimeters.

p {
  height: 20mm;
  border: 1px solid black;
}

Browser Support

Miscellaneous Information

Description

A ms, or millisecond, is a CSS time measurement. One millisecond is equal to 1/1000 of a second.

The format of this time value is a number followed by ‘ms’.

Examples

This example defines a transition on the opacity property that smoothly transitions over 2 seconds (2000ms):

div {
  transition-property:
    opacity;
  transition-duration:
    2000ms;
}

Browser Support

Miscellaneous Information

Description

A ms, or millisecond, is a CSS time measurement. One millisecond is equal to 1/1000 of a second.

The format of this time value is a number followed by ‘ms’.

Examples

This example defines a transition on the opacity property that smoothly transitions over 2 seconds (2000ms):

div {
  transition-property:
    opacity;
  transition-duration:
    2000ms;
}

Browser Support

Miscellaneous Information

Description

pica (1pc = 12pt)

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the paragraph font size to 2 pica (24 points).

p {
  font-size: 2pc;
}

Browser Support

Miscellaneous Information

Description

percent

A percent value can be specified with an optional + or -, followed by a number, followed by %. No spaces are allowed in the value.

Examples

This example sets the width of the paragraph to 50% of the conainer.

p {
  width: 50%;
  border: 1px solid black;
}

Browser Support

Miscellaneous Information

Description

point (1pt=1/72in)

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the paragraph font size to 16 points.

p {
  font-size: 16pt;
}

Browser Support

Miscellaneous Information

Description

pixel (1px = one dot on the computer screen)

A length value is formed by an optional + or -, followed by a number, followed by the two-letter unit abbreviation. No spaces are allowed in the value.

Examples

This example sets the paragraph font size to 24 pixels.

p {
  font-size: 24px;
}

Browser Support

Miscellaneous Information

Description

A rad, or radian, is a CSS angle measurement and is equivalent to 180/PI degrees (approximately 57.3 degrees). A positive rad value goes clockwise, and a negative rad value goes counter-clockwise.

The following table lists some common angle measurements:

Examples

This example rotates the image -5 rad:

.image {
  transform: rotate(-5rad);
}

Browser Support

Miscellaneous Information

Description

A rem is a measurement based upon the root element's font size. Fractional values are allowed.

The rem unit is defined as "equal to the computed value of font-size on the root element." A root element is an element that has no parent. In an HTML document, the root element is the <html> element.

Examples

This example sets the body font size to 14 pixels:

html {
  font-size:14px;
}

h1 { font-size: 2.0rem; } /* =28px */
h2 { font-size: 1.5rem; } /* =21px */
p { font-size: 1.0rem; } /* =14px */

<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Paragraph</p>

This produces the following output:

This example shows the compounding issue when using <em> unit and how using the <rem> font size unit fixes it:

<style>li.emtest { font-size: 0.75em; }</style>
<style>li.remtest { font-size: 0.75rem; }</style>

Example using 'em' units (compounding issue):
<ul>
  <li class="emtest">item 1</li>
  <li class="emtest">item 2
    <ul>
      <li class="emtest">sub-item 1</li>
      <li class="emtest">sub-item 2</li>
    </ul>
  </li>
  <li class="emtest">item 3</li>
</ul>

Example using 'rem' units:
<ul>
  <li class="remtest">item 1</li>
  <li class="remtest">item 2
    <ul>
      <li class="remtest">sub-item 1</li>
      <li class="remtest">sub-item 2</li>
    </ul>
  </li>
  <li class="remtest">item 3</li>
</ul>

This produces the following output:

Note: The font size of the sub-items in the first example is smaller than the parent level, but the sub-items in the second example fix the "em compounding problem".

Browser Support

Miscellaneous Information

Description

A s, or second, is a CSS time measurement.

The format of this time value is a number followed by ‘s’.

Examples

This example defines a transition on the opacity property that smoothly transitions over 2 seconds:

div {
  transition-property: opacity;
  transition-duration: 2s;
}

Browser Support

Miscellaneous Information

Description

A turn is a CSS angle measurement. One turn is equivalent to 360deg. A positive turn value goes clockwise, and a negative turn value goes counter-clockwise.

The following table lists some common angle measurements:

Examples

This example rotates the image -1/4 turn:

.image {
  transform: rotate(-0.25turn);
}

Browser Support

Miscellaneous Information

Description

The vh unit is relative to the viewport's height. The viewport's heigh is equal to 100 'vh' units.

The format of this length value is a number followed by ‘vh’.

Examples

This example defines a header with a font size proportional to the height of the viewport:

h1 { font-size: 8vh }

Browser Support

Miscellaneous Information

Description

The vm unit is relative to the viewport's height or width, whichever of the two is smaller. The minimum of the viewport's width/height is equivalent to 100 'vm' units.

The format of this length value is a number followed by ‘vm’.

Examples

This example defines a header with a font size proportional to the height or width of the viewport:

h1 { font-size: 8vm }

Browser Support

Miscellaneous Information

Description

The vw unit is relative to the viewport's width. The viewport's width is equal to 100 'vw' units.

The format of this length value is a number followed by ‘vw’.

Examples

This example defines a header with a font size proportional to the width of the viewport:

h1 { font-size: 8vw }

Browser Support

Miscellaneous Information