“Quite often using ems for any of that kind of layout stuff is actually preferable to using pixels because an em is related to your type so that there’s an inherent relationship between the layout and the typeface that you’re using.”
— Mark Boulton, SitePoint Podcast Interview
1 em is the height of a capital M and varies relative to the font size.
Working with ems requires a lot of brain-straining calculations.
so calculating 13px approximation = 1/16*13 = 0.8125 - and I believe most people use 0.8em (and 1px border calculation was made the same way 1/16*1 = 0.0625) but remember that after that, once the font size is set on the parent element the calculation becomes relative: so it wouldn't be : 1/16*10 = 0.625em or your font will turn out @ 0.8em * 0.625em = 0.5em (approx. 8px) Your base font setting (whatever it is - in this case 0.8em) is always equal to 1 and as 1 in this case = 13px (approx) calulating the relative approximation for 10px becomes 1/13*10 = 0.77 which equates to 0.77em (this theory works with percentages too)
— SuzyUK tries to explain pixel to em conversion
Resetting the <body> font-size to 62.5% makes life easier! (just divide by 10)
body {
font-size:62.5%;
}
1em = 10px
0.4em = 4px
96em = 960px
Using relative units for layouts makes page zooming work in older browsers
Avoid declaring a font-size on containers
Source: Typetester’s base font size