homepage Welcome to WebmasterWorld Guest from 54.234.225.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
px vs. em
Can someone explain the difference?
Max_Power




msg:1184242
 1:37 pm on Nov 23, 2003 (gmt 0)

What is the difference between setting a value in pixels and setting a value in em? Is em more (for lack of a better word) "flexible" than px? What does em stand for, anyway?

 

dcrombie




msg:1184243
 1:59 pm on Nov 23, 2003 (gmt 0)

An em is a typographers unit of measurement that is proportioned to the width of a capital letter "M." It will vary from font to font and will also vary with the point size of the font.

;)

trismegisto




msg:1184244
 4:03 pm on Nov 23, 2003 (gmt 0)

Hi

dcrombie, thatís correct speaking in typographical terms, however, regarding stylesheets, the meaning is different. emís represent the size of the font specified in that element (or inherited), so, if you specify in a div:

font-size: 12px;

And later in your document you assign to the same div a border in this way:

border: 2em solid #000000;

the border of the div will be 24px, 1em represents 12px as defined earlier in the stylesheet. If you do not specify at all a size for the font, it will depend on the browser stylesheet.

killroy




msg:1184245
 4:29 pm on Nov 23, 2003 (gmt 0)

In CSS, em works very similar to percentages relative to the enclosing block.

So 2em=200% and 1.5em=150%.

There is one major difference though, where one inherits, and one doesn't. I'm not sure which is which though.

example:
<div style="font-size:10px">
<div style="font-size:2em">
<div style="font-size:1em">
Hello World
</div>
</div>
</div>

In this case hello world is 10px. it's 1em, relative to the las absolute definition. not relative to the 2em before (20px).

<div style="font-size:10px">
<div style="font-size:200%">
<div style="font-size:100%">
Hello World
</div>
</div>
</div>

In this case Hello world is 20px tall, as the % inherit, 200% of 10px is 20px and 100% of 20px is 20px.

Or the other way round.

So it'S more usefull to compare em to % then to px values. px pt and so on are absolute, while em and % are relative.

SN

chadmg




msg:1184246
 4:12 pm on Nov 26, 2003 (gmt 0)

I use 10em on all my font-sizes. It's easy on the eyes.

DrDoc




msg:1184247
 4:36 pm on Nov 26, 2003 (gmt 0)

example:
<div style="font-size:10px">
<div style="font-size:2em">
<div style="font-size:1em">
Hello World
</div>
</div>
</div>

In this case hello world is 10px. it's 1em, relative to the las absolute definition. not relative to the 2em before (20px).

What are you talking about? ;) "Hello World" is 20px. Font sizes are inherited, no matter if they are px, em, or %.

[w3.org...]
A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets.
The actual value of this property may differ from the computed value due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes.

Child elements inherit the computed 'font-size' value

Thus, % and em are the exact same thing.

photon




msg:1184248
 6:24 pm on Nov 26, 2003 (gmt 0)

Max_Power--

To answer your second question

Is em more (for lack of a better word) "flexible" than px?

Yes, it is. Using ems will allow users to adjust the test size in IE (other browsers--e.g., Opera--will allow a user to scale no matter what). If you use px, IE won't allow the user to change the text size.

Not changing the text size may sound like an advantage to someone wanting to control the exact look of a web page they've created, but it's a disadvantage to those folks who may need a larger text size to read the page comfortably.

I use 10em on all my font-sizes. It's easy on the eyes.

With an average of two or three words on a page, I would think it'd be very easy to read! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved