What are pros and cons to use 'em' sizing unit for width, height, padding, margin, line-height in fixed width layouts?

Question

in my projects i use em for sizing of font only with body {62.5%}?

with this method i can easily calculate em value.

so what are pros and cons if i use em sizing unit for width, height, padding, margin, line-height, even for inline images also along with font for fixed width layouts?

Answer 1

Ems are wonderful units for a good designer. It all rests on what you're taking as pixel perfect. Since most front-enders will only get an image (maybe a .psd file) from the designers, it might seem a good idea to keep every pixel as is. Which is good, except that you can't rely on web browsers to be pixel perfect.

Imagine a browser with a different font, or a font with a different aspect. Imagine a user who enlarges the default font or who zooms in (using those browsers that only enlarge the font). A margin set in px will still show up with the exact px value you gave it. An em-based margin will stretch according to the font-size.

Also, they're not that hard to work with. Define a base font-size and line-height and apply it to your (after a good reset, of course). Then change it only for the titles (you shouldn't have more than 6 titles) and for any region where it makes sense to change the font-size (a sidebar or footer). You will do 3 or 4 calculations, everyone will be happy :)

Answer 2

The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).