EM vs PX

[howellsgs]

When I 'google' the use of EM and PX measurement usage, I more or less only find the that EM is based upon the containers text size and and PX is more of a static sizing based upon pixels. Does anyone know of a web site that will help explain when it is appropriate to use EM over PX and vice versa? For instance, using EM measurement scale for a <div> background-image doesn't seem to be a good idea.
Thank you in advance for your help

[BYK]

I think this page would help

[boogyman]

When I 'google' the use of EM and PX measurement usage, I more or less only find the that EM is based upon the containers text size and and PX is more of a static sizing based upon pixels. Does anyone know of a web site that will help explain when it is appropriate to use EM over PX and vice versa? For instance, using EM measurement scale for a <div> background-image doesn't seem to be a good idea.
Thank you in advance for your help

pixel's are based upon the browsers rendering engine and are absolute aka not resizable
em's are based upon the dimensions of the M character of whatever font-family / size the browser is set at, and dimensions are reconfigured upon text-size increase / decreased by the user.

[infweb08]

hi, even myself always get confused when to use EMs and px values. Correct me if I am wrong, now almost all the new versions of the browsers have an option to zoom the page if they feel font size is too small. The link provided in the first reply is useful in knowing what are the different ways of value asignment but is there a separate page dedicated which exactly tells you when to use which of the values? Thanks

[boogyman]

There are very very few circumstances when I believe "pixels" are appropriate

I tend to only use pixels if I am assigning a background image to a tag. in other words, I have a list and I want to apply a small icon to one of the sides to "dress" it up. Some developers would just embed the image right into the HTML, however the image is not essential, its a cosmetic improvement, therefore it's correct declaration is through css as a background image. Since I know the dimensions of the image I will be using, and I know they wont change unless I physically go in and change the the image itself, this would be an instance where pixels are the correct tool. As I said before, they are not subject to font size changes, where em's are. I apply a left padding to the element I want the icon to appear left of (or right padding if i want the image on the right) and then I apply the background image. Depending on the size of the image, you may also need to apply a line-height property to account for the full height of the element.

selector {
     padding: 20px;
     background: url('/path/to/image.gif') no-repeat top left/right;
}

If I use em's in this instance, if the user increases or decreases their font-size beyond a certain point the text will not display properly in relation to the image.

[Medyman]

I ran across this article today and thought I would post it here. It seems to give a thorough explanation on EMs.

I found that article in a disussion on the ExpressionEngine forums about this topic. People there have suggested several other websites/resources as a reference to using EMs. You can view that discussion here.

[djr33]

The answer to this is very simple:

use pixels if you want a static size-- example: an image (you don't want your image resizing, do you?), or something like that.

use em, %, etc. if you want something that fits the window, which is generally best for your overall design.

Sometimes mixing is most effective, like having a 50px image in the middle of a 100% div, which means that there is 50%-25px left on each side, etc.
(The math and layout can get complex, but for now just try to understand the concept-- the rest will come later!)