Welcome to WebmasterWorld Guest from 54.162.239.134

Forum Moderators: not2easy

Message Too Old, No Replies

px vs. em

Can someone explain the difference?

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

10+ Year Member



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?
1:59 pm on Nov 23, 2003 (gmt 0)

10+ Year Member



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.

;)

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

10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



I use 10em on all my font-sizes. It's easy on the eyes.
4:36 pm on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



Max_Power--

To answer your second question

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

Yes, it is. Using

em
s 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! :)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month