em vs pixels

What is the difference between em and pixels? If you dont understand take a look at this codeing.

Code: Select all

margin-left: 1em;
or
margin-left: 50px;

http://www.bigbaer.com/css_tutorials/css_font_size.htm

EM is a relative measure that is based on whatever font you specify. You can think of 1em as having a size equal to the space subtended by a capital "X". So, a width of 4em in verdana (the font i am typing in right now) would look like this:

XXXX

Pixel is an absolute measure based on, you guessed it, the pixels subtended by a character.

Good web designers take care to control both absolute and relative font specifications. First and foremost, you should make sure your font sizes throughout a site are relative to one another. This is more flexible bc it allows you to change the size of the font while preserving the proportionality.

The other question you must answer is:

How do you initially specify a font size at the root level of the site? Should you use absolute or relative?

That depends on what you're trying to accomplish. You can specify an absolute pixel size as the parent font size and then, provided all other font sizes on the site are relative, any changes you make to that one parent font size will propagate throughout the site and remain proportional.

Or...

You can specify a relative value as the parent font size, which leaves the decision up to the user's browser defaults. This method is more flexible because it accommodates for all types of browsers but is less consistent in visual layout.

I generally don't trust my users that often and tend to specify a fixed parent font size coupled with proportional body font sizes.

Hope this helps.

You will find some info on this in the sticky at the top of this forum.

Have a read and come back if you have more questions.

You can use ems to make <div>'s that shrink or expand depending on the text size set by a browser as well. Fun stuff.