pelicin › web › CSS

Length

Length data type represents a distance value.

It consists of a number and one of the units listed below. (Sometimes, you can also use percentages for this data type.)

Length Units

Absolute Length Units

  • px — one pixel (1 px = 1/96 in)
  • cm — one centimeter
  • mm — one millimeter
  • in — one inch
  • pc — one pica (1 pc = 1/6 in)
  • pt — one point (1 pt = 1/72 in)

Font-Relative Lengths

  • em — represents the calculated font-size of the element
  • rem — represents the calculated font-size of the root element ("root em"), typically refers to the font size of the <html> element
  • ch — represents the width of the 0 (zero) glyph
  • ex — represents the x-height of the element's font

Viewport-Percentage Lengths

  • vh — 1 vh = 1% of viewport height
  • vw — 1 vw = 1% of viewport width
  • vmin — picks the minimum of vh or vw
  • vmax — picks the maximum of vh or vw

References