You may have come to terms with using flexible units of measurement, but you still might not fully understand when to use rem and when to use em . This tutorial will help you figure it out! Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. If you use a value of 1em or 1rem , it could translate in the browser as anything from 16px to 160px or any other value. CSS padding set to 1em Computes to 16px CSS padding set to 1em Computes to 160px On the other hand px values are used by the browser as is, so 1px will always display as exactly 1px . Try the slider out on this CodePen example to see how the value of rem and em units can translate into different pixel values, while explicitly set px units stay fixed in size: The Big Question Using em and rem units gives us flexibility in our designs, and the ability to scale elements up and down, instead of being stuck with fixed sizes. We can use this flexibility to make our designs easier to adjust during development, more responsive, and to allow browser users to control the overall scale of sites for maximum readability. Both em and rem units provide this flexibility and work in similar ways, so the big question is, when should we use em values and when should we use rem values
↧