2 Working with relative units
This chapter covers
- The versatility of relative units
- How to use ems and rems, without letting them drive you mad
- Using viewport-relative units
- An introduction to custom properties
When it comes to specifying length values, CSS provides a wide array of options to choose from. One of the most familiar, and probably easiest to work with, is pixels. These are a type of absolute unit; that is, 5 px always means the same thing. Some other units, such as em and rem, are not absolute, but relative. The value of relative units changes, based on external factors; for example, the meaning of 2 em changes depending on which element (and sometimes even which property) you’re using it on. Naturally, this makes relative units more difficult to work with.
Definition
Length is the formal name for a CSS value that denotes a distance measurement. It’s a number followed by a unit, such as 5px. Percentages are similar to lengths, but strictly speaking, they’re not considered lengths.