When to "em" and when to "px"?

[kraftomatic]

Hey All,

I was recently looking at the Simplebits stylesheet and I wanted to ask a question. I see in some instances the use of em for font-sizing, and other times a percentage (font-size: 88%;). Any particular reason why that's done?

I also noticed for padding and margin settings, sometimes they are in "px" and other times "em". I wasn't sure what the preferred way would be and why there would be a blend of methods.

I've used px for a long time, however with looking at the use of viewing sites through mobile devices and such, I'm looking to make the jump to em usage and was looking for some additional comments.

Thanks.

[COBOLdinosaur]

Em i sth best choice for font sizing, becasue it leaves control in the users hands and optimizes for the device. Percentage if most often the best choice for box dimensions and positioning, though em will work alomost as well. Values in pixels should really only be used for the fine turning and tweaking properties padding, border, or where you have to have a consistent size independent of the browser settings or device.

[]|V|[agnus]

Em units and percentages are great is you want a scaleable layout. A layout described purely in ems will scale in all browsers the way Opera scales everything regardless. That is, except for images, though you can set image sizes in em units and they will then zoom too! (Only trick there is that it's pretty much trial and error to get an em equivalent of what the default pixel size would be.)

[Tristan Gray]

Relative units are always favorable for layouts, but I have found that it certainly takes a lot more time to get your layout cross-browser compatible. It is worth it though as there is no point having a site that can only be viewed in 800x600 comfortably.

I am not so convinced in doing complex designs with percentages and what not because some browsers treat the inherit properties differently which can lead to severely ugly renders but font should more or less always be in ems in my opinion.

[kraftomatic]

Maybe I'll start out with pixels to get my base layout set .. Then switch to 'ems' and tweak from there .. testing in various browsers .. and essentially hoping it works well on mobile phones and such ..