# CSS Units Explained: EM Vs REM In CSS, the numeric value [``](https://developer.mozilla.org/en-US/docs/Web/CSS/length) represents the size of the elements. 💻💻 This CSS data type, ``, represents the distance value. Many CSS properties such as width, height, margin, padding, border-width, font-size, text-shadow, box-shadow etc., uses `` CSS gives us different units to express ``. They fall into two categories: *Absolute Units* & *Relative Units*. **Absolute units** are physical measurements and will always be the same size. Examples are `px`, `pt` etc. **Relative Units** are dynamic and depend on other (mostly parent) elements' ``. Examples of these are `em`, `rem`, `vh`, `vw` etc. With responsive designs everywhere, they are used to create perfectly scalable layouts. Many of us already use `em` and `rem` in our designs. Have you ever wondered how they differ and whether they fit our design needs? 🤔🤔 We will examine the differences between `em` and `rem` in this blog post and explore how they impact our designs. ## Understanding CSS Unit `em` The unit `em` is always relative to the font-size of the parent element. Let us take an example 👇🏻👇🏻 ![em vs rem -1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640029531933/8Vo3K2wEY.png) In the above example, the `font-size` of the `.child-element` is `30px` For the `.child-element`, the font-size is calculated based on its parent, i.e, `.parent-element` font-size 🤔🤔 **Child element font-size calculation:** parent-element font-size = 20px Hence in the child element, 1em = 20px 1.5em = 20 * 1.5 = 30px Hence, the child element's font-size is `30px`. If the parent element's font-size is not specified, it will be looked higher up in the DOM tree. If no font-size is specified until the root element, ``, then the browser's default of `16px` is used. Therefore, `em`'s are compounding from one level to the other. Let us take a quick look at the next example. ![em vs rem - 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640029563284/l7JNl7NbJ.png) 👇🏻👇🏻 For the HTML above, here is a picture of `em` calculated down the DOM. ![CSS Unit 'em' explained.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640029580033/bjxVe100gk.png) A further interesting fact about `em` is that when used for properties other than `font-size`, such as `padding`, `margin`, etc., it is relative to the element's own font-size. ![em vs rem - 3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640029594331/-nlgxmN0q.png) For the above example, the `padding` is calculated based on its own `font-size: 30px`. As a result, the top and bottom padding will be `60px` (2em * 30px) and the right and left padding will be `30px` (1em = 30px). A live example of how `em` works. 🎯🎯 %[https://codepen.io/skay/pen/PoJKwed] This compounding nature of `em` can lead to unintended consequences in our designs. `rem` solves this issue. ## Understanding CSS Unit `rem` For the sole purpose of solving the compounding problem of `em`, the `rem` unit is introduced. `rem` stands for *root element's em*. `rem` always refers to the root element's (in our case, the HTML element) font size no matter where it is applied. It stays consistent throughout the document and to all the properties. Here is how `rem` is calculated down the DOM for the same example as `em`. 👇🏻👇🏻 ![CSS Unit 'rem'.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640029980966/Dd5NOx-O2.png) Using `rem` units allows us to avoid the compounding effect of `em` units. With `rem`, it is always based on the font-size of the root element, so there are no surprises. Also, with other values like margin, padding etc., `rem` is consistently based on the `font-size` of the root element Live example of `rem` 🎯🎯 %[https://codepen.io/skay/pen/RwLZNvB] ## Conclusion: EM or REM? Choosing between `em` or `rem` always depends on personal preferences. There is no such thing as a *better* option between them. If you want a consistent design with no surprises, use `rem`. If you want to achieve something that is influenced by the parent element, then use `em`. But extensive testing for different devices and orientations should be done when using `em`. My Personal preference is `rem` over `em`. Finally, here is a little comparison between `em` and `rem`. 👇🏻 %[https://codepen.io/skay/pen/eYGBoyM] If I have missed something, let me know in the comments.