CSS in Depth

Chapter 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 CSS variables

When it comes to specifying 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 known as absolute units; that is, 5 px always means the same thing. 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 ...