Measurement Units

CSS supports a number of units of measurement. Such as: absolute and relative.

Absolute units

 Absolute units have predefined meaning with the exception of pixels. They are not appropriate for webpage that appear on screens.

Absolute units name with description

  • px: measure in pixels, defined as equal to 1/96 of an inch in css.
  • in: measure in inches. p{word-spacing:.12in;}
  • mm: measure in millimeters. p{word-spacing:15mm;}
  • cm: measure in centimeters. p{word-spacing:2cm;}
  • q: 1/4 millimeters. p{word-spacing:.3q;}
  • pt: Points (1/72 inch)
  • Pc: picas or (16 inch) equivalent to 12 points.
Relatinve units

Relative units are based on the size of the present element.

Relative units name with description

  • em: Equal to the current font size.
  • ex: X-height, The height of lowercase “x” in font.
  • rem: Rootem, equal to the size of root element.
  • ch: Zero width, equal to the width of a zero (0).
  • vw: Viewport width. h1{font-size: 3vw;}
  • vh: Viewport height. h1{font-size: 3vh;}
  • vmin: viewport minimum. h1{font-size: 2vmin;}
  • vmax: viewport maximum. h1{font-size: 2vmax;}

Leave a Reply