https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
## Summarizing `em` vs. `rem` Difference
- Translation of `rem` units to pixel value is **determined by the font size of the html element**.
This font size is **influenced by inheritance from the browser font size setting unless explicitly
overridden** with a unit not subject to inheritance.
- Translation of `em` units to pixel values is **determined by the font size of the element they’re used on**.
This font size is **influenced by inheritance from parent elements unless explicitly overridden** with a
unit not subject to inheritance.
- `rem` and `em` units are computed into pixel values by the browser, based on font sizes in your design.
- `em` units are based on the font size of the element they’re used on.
- `rem` units are based on the font size of the html element.
- `em` units can be influenced by font size inheritance from any parent element
- `rem` units can be influenced by font size inheritance from browser font settings.
- Use `em` units for sizing that should scale depending on the font size of an element other than the root.
- Use `rem` units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.
- Use `rem` units unless you’re sure you need em units, including on font sizes.
- Use `rem` units on media queries
- Don’t use `em` or `rem` in multi column layout widths - use % instead.
- Don’t use `em` or `rem` if scaling would unavoidably cause a layout element to break.