topaxi.codes

CSS Units

I recently came across several CSS-Units I didn't know about. So I compiled a little list of all the currently available units.

Here a list of all size related CSS-Units for width, height, font-size, line-height etc.

Absolute units

  • px - Represents a pixel on the screen for devices around 96dpi or lower. For displays higher than 96dpi, one px doesn't actually represent a single pixel, but 1 / 96 of 1 inch.
  • q - 1 / 4 of a millimeter.
  • mm - One millimeter.
  • cm - One centimeter.
  • in - One inch (or 25.4mm).
  • pt - One point which equals 1 / 72 of an inch.
  • pc - One pica which equals 12pt

Relative units

  • Font-Relative
    • em - One em equals the elements font-size. If set on the font-size property, it is calculated based on the inherited font-size.
    • rem - Like the em unit, the rem unit is relative to the font-size, but instead of using the inherited font-size, it uses the font-size of the document (i.e. the <html> font-size).
    • ex - One ex equals the height of the small letter x, this is also called the x-height. For most fonts, this is close to 0.5em.
    • ch - The width of the number 0.
  • Viewport-Relative
    • vh - 1 / 100 of the height of the viewport.
    • vw - 1 / 100 of the width of the viewport.
    • vmin - 1 / 100 of the width or height of the viewport, whichever is smaller.
    • vmax - 1 / 100 of the width or height of the viewport, whichever is bigger.