All right, I know this has been gone over a few times, but I don't even recall getting an answer, or even asking this question!
This is how I see it...
em is a unit of measure equal to the elements font-size, thus, when specifying, let's say, the dimensions of a <div>, the <div> will increase and decrease in size depending on what the browser-specified font-size is. But not depending on the users' resolution/window size.
% is a unit of measure which is defined by its container (I'm sure I described that wrong). E.g., if you have a <div> inside another <div> with the latter <div> having a width of 500px, if you set the width of the first <div> to 10%;, it will be 50px wide, but it the size will increase or decrease depending on the users' resolution/window size. But not depending on the browser-speocified font-size.
Now, both em and % have their advantages, and disadvantages. My question, is which one should be used? I am quite sure that not juse one should be used, but when is it appropriate to use both? And how exactly should they be used? This has puzzled me for a long, long time.Use em for the font in the body selector
body {font-size:1em;}
and % for all other font declarations
.content {font-size:200%;}
Use % for blocks and px for the block's belts(margin padding border).
This is the ideal scenario, using relative units, except for belts.
In practice you may want to fix the font-size defined in the body,
for your own preference or to over-ride the preference set by a user who has been playing with the browser options (this does happen, I have angry emails to prove it).
Blocks, in some instances, may need to be in absolute units.i use pxOriginally posted by giggledesign
i use px
And you are wrong in doing so
I actually mix the two...Ideally, I use ems to specify most column widths and percentages for font sizes.
See <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/">http://www.cm-life.com/pages/newdesign/</a><!-- m --> for an example em-based layout. Resize the browser's font size via the View menu. You'll notice that the layout changes proportionate to the change in text size. The advantage here is that you preserve the optimum number of words per line for reading, but often does require side-scrolling.
Another possibility is writing a javascript that resizes the body's font size until the layout takes up the full width of the browser. Kinda like maximizing a window.
I use px to specify borders, but ems for pretty much everything else.
An em is equal to the point size of a font. An en is half the point size, if you really care about the official definition of an em. Also, see "The Trouble With EM 鎶
This is how I see it...
em is a unit of measure equal to the elements font-size, thus, when specifying, let's say, the dimensions of a <div>, the <div> will increase and decrease in size depending on what the browser-specified font-size is. But not depending on the users' resolution/window size.
% is a unit of measure which is defined by its container (I'm sure I described that wrong). E.g., if you have a <div> inside another <div> with the latter <div> having a width of 500px, if you set the width of the first <div> to 10%;, it will be 50px wide, but it the size will increase or decrease depending on the users' resolution/window size. But not depending on the browser-speocified font-size.
Now, both em and % have their advantages, and disadvantages. My question, is which one should be used? I am quite sure that not juse one should be used, but when is it appropriate to use both? And how exactly should they be used? This has puzzled me for a long, long time.Use em for the font in the body selector
body {font-size:1em;}
and % for all other font declarations
.content {font-size:200%;}
Use % for blocks and px for the block's belts(margin padding border).
This is the ideal scenario, using relative units, except for belts.
In practice you may want to fix the font-size defined in the body,
for your own preference or to over-ride the preference set by a user who has been playing with the browser options (this does happen, I have angry emails to prove it).
Blocks, in some instances, may need to be in absolute units.i use pxOriginally posted by giggledesign
i use px
And you are wrong in doing so
I actually mix the two...Ideally, I use ems to specify most column widths and percentages for font sizes.See <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/">http://www.cm-life.com/pages/newdesign/</a><!-- m --> for an example em-based layout. Resize the browser's font size via the View menu. You'll notice that the layout changes proportionate to the change in text size. The advantage here is that you preserve the optimum number of words per line for reading, but often does require side-scrolling.
Another possibility is writing a javascript that resizes the body's font size until the layout takes up the full width of the browser. Kinda like maximizing a window.
I use px to specify borders, but ems for pretty much everything else.
An em is equal to the point size of a font. An en is half the point size, if you really care about the official definition of an em. Also, see "The Trouble With EM 鎶