CSS Question - Why Use em Vs. px?

[Lee]

Im not really understanding why some types of site require the usage of em over px when setting width and font sizes, is there really that much of a difference between the two?

Do any of you folks use em for font and width dimensions, etc, if so, what is the main benefit of doing so?

Regards,

Lee

[DEVELISH]

Im not really understanding why some types of site require the usage of em over px when setting width and font sizes, is there really that much of a difference between the two?

Do any of you folks use em for font and width dimensions, etc, if so, what is the main benefit of doing so?

Regards,

Lee

px is a FIXED size in PIXELS

em is a size RELATIVE to the PARENT element meassured in UNITS (origin of size in uppercase letter M in that element)

you can build whole layouts using em as a measurement like in

body {
font-size:100px;
}

.mydiv {
font-size:1.2em;
line-height:1.5em;
width: 50em;
padding: 0.5em 1em 0.5em 1em;
}

in theory mydiv's font size should be 120px now. if you do not specify any font size it uses the standart font size of the browser.

the neat thing is that it SHOULD scale perfectly when the user increases or decreases the standart font size in the browser since it em is a relative measurement.

when I recall right windows itself uses some "units" system when drawing the various window elements like buttons and checkboxes and such. then when you increase or decrease resolution of your screen the units are recalculated accordingly and thus making 1em e.g. 10px wide and on other screens 12px wide - overall its the same though..

DEV