https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

https://www.chrisjmendez.com/2008/06/11/how-to-use-ems-when-youre-already-comfortable-with-pixels/

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }

p { font-size: 1.2em } /* == 12px */
#content { width: 80em; margin: 0 auto; } /* == 800px */

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }
#content { width: 800px; margin: 0 auto; }

Here's why I use em:
1. Pixels are precise but they're not very flexible.  If you increase your browser's font-size, things may grow in wacky ways.
2. Percentages solve the issue of flexibility but sometimes the math gets tricky and I don't feel very comfortable purely working in that mode.  I believe in Rapid Development which in this context means fewer calculators.

By translating 1em to equal 10px, I am able to think in terms of Photoshop pixels but also ensure that increasing the font-size will allow the site to grow proportionally.  If you know how to multiply and divide by 10, you'll rarely need a calculator.

Note: The only time I do use px is for 1px borders.  0.1em doesn't work very well.

How to use EM's when you're already comfortable with pixels

css

CSS