CSS units Cheat Sheet

CSS, Layout, Cheatsheet · Jun 12, 2021

  • px: Absolute pixel value
  • rem: Relative to the font-size of the root element
  • em: Relative to the font-size of the element
  • %: Relative to the parent element
  • vw: Relative to the viewport's width, 1vw = 1% * viewport width
  • vh: Relative to the viewport's height, 1vh = 1% * viewport height
  • vmin: Relative to the viewport's smaller dimension, 1vmin = min(1vh, 1vw)
  • vmax: Relative to the viewport's larger dimension, vmax = max(1vh, 1vw)
  • ch: Relative to the width of the glyph "0" of the element's font
  • in: Inches 1in = 2.54cm = 96px
  • pc: Picas 1pc = 1in / 6 = 16px
  • pt: Points 1pt = 1in / 72 = 1.333px (approximately)
  • cm: Centimeters 1cm = 96px / 2.54 = 37.8px (approximately)
  • mm: Millimeters 1mm = 1cm / 10 = 3.78px (approximately)

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Cheatsheets

    A collection of cheatsheets to bookmark and come back to whenever you need to look up anything.

    Collection · 15 snippets

  • Flexbox Cheat Sheet

    Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.

    CSS, Layout · Jun 12, 2021

  • CSS inherited properties cheatsheet

    A quick reference for inherited CSS properties.

    CSS, Layout · Nov 20, 2022

  • Responsive image mosaic

    Creates a responsive image mosaic.

    CSS, Layout · Dec 30, 2020