CSS units Cheat Sheet

Angelos Chalaris · Jan 25, 2021 ·

CSS, Layout, Cheatsheet

  • 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)

Image credit: Sharon Sivertsen on Unsplash

Recommended snippets

  • 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.

  • Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet.

  • Learn everything you need to know about JavaScript modules with this handy cheatsheet.