CSS Units!

px

  • Historically equal to "one pixel".
  • Absolute. 1px == 1px throughout a page.
  • In print, 1px == 1/96in

mm, cm, in, PT, PC

  • Physical/historical units made for print.
  • Often unexpected results when using on screen media.
  • 1in = 2.54cm = 25.4mm = 72pt = 6pc (= 96px in print)

%

  • Percentage of width (or height) relative to an element's container.
  • Sometimes relative to something completely different:
    line-height: 50%; for example.
  • Aren't universal, only work with properties that explicitly accept percentages. border-width for example cannot be a percentage.
  • Gotchas: margin and padding are always calculated from width.

em

  • Relative to the font-size of the current element. If no font-size is set, it is inherited.
  • 1em = 1 × font-size. 
  • Allows you to control many dimensions from a single parent text-size.
  • Gets complicated with nested text-sizes based on em units. for example:

 

 

... 10 × 1.8 × 1.25 × 0.25 × 50 = 281.25 (px)

What's the actual width of the last element?

eX

  • Like "em", but relative to the x-height of the font and font-size of the current element. 

ch

  • Like "em", but relative to the advance width of the character "0" given the font and font-size of the current element. 
  • Can be thought of as "characters".
  • Could be useful for code snippets, for example. (width: 80ch)

Rem

  • Like "em", but always relative to the font-size of the root element (usually <html>).
  • More straight-forward and maintainable approach to scaling a page's dimensions with responsive breakpoints.

VH, VW, VMIN, VMAX

  • 1vh = 1% of the viewport height.
  • 1vw = 1% of the viewport width.
  • 1vmin = 1% of the viewport's smallest dimension
  • 1vmax = 1% of the viewport's largest dimension
  • Great for creating statically scalable webpages without breakpoints.

fin.

Made with Slides.com