Units

CSS supports absolute and relative units of measurement.

 

The 'em' is the preferred unit, being automatically scalable to the font being used. 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt.

 

Unit Description Example
% Specifies measurement as a percentage relative to another value, typically an enclosing element. p {font-size: 16pt; line-height: 125%;}
cm Specifies a measurement in centimeters. div {margin-bottom: 2cm;}
em Specifies a relative measurement for the height of a font in em spaces.

Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.

p {letter-spacing: 7em;}
ex Specifies a measurement relative to a font's x-height.

The x-height is determined by the height of the font's lowercase letter x.

p {font-size: 24pt; line-height: 3ex;}
in Specifies a measurement in inches. p {word-spacing: .15in;}
mm Specifies a measurement in millimeters. p {word-spacing: 15mm;}
pc Specifies a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch. p {font-size: 20pc;}
pt Specifies a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;}
px Specifies a measurement in screen pixels. p {padding: 25px;}

Leave a Reply