Units in style sheets (CSS)

January 2017

Units

With style sheets, you can use numeric values to set style properties in multiple ways:

  • absolutely, meaning in units which are independent of the form of output (such as in centimetres);
  • relatively, meaning in units relative to an element.

Style sheet values may be given either in integers or in real numbers (digits with an integer part and a decimal part).

These values can, in some cases, be negative (preceded with a minus sign "-"). However, some properties have upper and lower limits to the values they can take.

Absolute units

The absolute units offered by the CSS standard are summarised in this chart:

Relative units

The relative units offered by the CSS standard are summarised in this chart:

unit description
cm centimetres
in inches (1 inch = 2.54 cm)
mm millimetres
pt points
pc picas (1 pica = 12 pt)
unit description
em Relative to the font size of the indicated element. Sole exception to this rule: when the property font-size is defined, it is relative to the font size of the parent element.
ex Relative to the lowercase letter height of the indicated element. Sole exception to this rule: when the property font-size is defined, it is relative to the lowercase letter height of the parent element.
px The pixel. This is a unit which may be rendered differently depending on the screen resolution of the user's monitor.
% The percentage is a unit which is relative to the size of the element or its parent.

Related



Les unités dans les feuilles de style (CSS)
Les unités dans les feuilles de style (CSS)
Le unità nei fogli di stile (CSS)
Le unità nei fogli di stile (CSS)
As unidades nas folhas de estilo (CS)
As unidades nas folhas de estilo (CS)
Latest update on October 16, 2008 at 09:43 AM by Jeff.
This document, titled "Units in style sheets (CSS)," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).