topaxi.codes

CSS Units

on
  • CSS
  • Cheatsheet

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 </dl>

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.