CSS Length Units

The width, height and font size of elements is an important part of a web page's layout and feel. There are times where we know the exact absolute lengths of elements, or want to scale an item using the root element's font size as a basis, or maybe scale an element relative to the viewport (screen size) of the active device.

Luckily, CSS provides solutions for all of these cases.

• Pixels: absolute length unit using the monitor's pixels as a base
  • 512px, 1024px
• Percentage of parent: relative length unit using the parent element's lengths as a base
  • 25%, 50%
• em: relative to the current element's font size
  • 2em
• rem: relative to the root element's font size (usually the <html> element)
  • 3rem
• Percentage of viewport: relative to the current device's viewport width and height
  • 50vw