Solved

When to use px vs em vs in ...on a margin property?

Posted on 2006-10-30
6
3,039 Views
Last Modified: 2013-12-03
I am confused on when to use em or px when setting margin property on elements. For font settings I have been told that em is best to use as a general rule. But I see for margins a common setting seems to be in pixels (px). How do I determine whether I should use px or em for a margin? Is there a general rule for margin unit of measurement choices (px, em, in)?
0
Comment
Question by:LuluDev
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 125 total points
ID: 17835616
The size of an 'em' depends on the size of the font (it's actually the height of a capital letter M in whatever font you're using.  This means anything on your page that ought to get bigger as font size increases, and that ought to get smaller as font size decreases, should likely be specified in em's.

You're also right that a lot of people don't bother with this, either because they don't understand it (which is too often the case), or because they're trying to nail down the exact look of the page, and to heck with people who want bigger or smaller fonts.

W3C offers some more refined tips about em sizing here: http://www.w3.org/QA/Tips/font-size


The basic rule is whether the size you're specifying has to do with the look of the TEXT or the look of the PAGE.  I might, for example, specify an 8px margin around a box of some kind 'cause I want 8px margins on everything in my page.  The text can get bigger, and I still want pretty 8px margins.

If I'm specifying how wide I want a <label> or how far apart I want paragraphs, that's definitely gonna be in em, since a bigger font should definitely produce a wider <label> and farther-apart paragraphs.


What about in and pt sizes?  They come in useful for print styling, really.
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 125 total points
ID: 17836899
1em is equivalent to the current font-size (not the size of M):
<div style="font-size: 20px;"><div style="height: 5em; background: red;">This div is exactly 100px high</div></div>
...but that's only true in when the text-size is set to 100%.

I use "em" for everything except for borders, and of course for images and other pixel-based elements.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17836932
Sorry, I was referring to the typographic use of "em" in which M and the font size are the same thing; it's true there are plenty of modern fonts that do not include M and then that obviously won't be true.  For normal fonts they should be equivalent.

Sorry for any confusion.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:LuluDev
ID: 17837064
Thank-you for your responses and clarifications.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17837634
http://www.w3.org/TR/CSS21/syndata.html#value-def-length
I guess you got it mixed up with "ex", which is equivalent to the height of a lower case "x".
Typography can be confusing.

http://en.wikipedia.org/wiki/Em_%28typography%29#Incorrect.2FAlternate_Definitions
<< One em is sometimes said to be equal to the WIDTH of a capital "M". >>
Anyway, it's easier to simply think of it as the font-size of the current element without any other reference.
This does not change much for this particular question...

I agree with the rest of your first post.  People use "px" because they don't know better.  Just like people design fixed-width pages because they don't know how to code a liquid layout properly.

Actually, for font-size, i prefer to use percentages.  The result is exactly the same (font-size:1.5em is equivalent to font-size:150%).  Percentages just make more sense to me.
0
 
LVL 11

Assisted Solution

by:walkerke
walkerke earned 50 total points
ID: 17843007
A little history lesson:

The term em originally referred to the width of a lower case "m" which often determined the point size of a font. In the olden days, when type characters were little lead or wooden blocks with the shape of the character extruding in reverse on one end, it was often difficult to choose a point size because different fonts would have different heights at the same size because of the difference in the width of the "m." A 12-point Helvetica character may be the same height as the same character in 16-point Park Avenue. Baselines often bounced up and down for the same reason. There were also 72.27 points per inch.

With the advent of digital typesetting, character heights and baselines became more important than the width of the "m" and the em space transformed into a space equal in width and height. In other words, a 12-point em space would be 12 points wide regardless of the width of the "m."

With the advent of desktop publishing, the typographer's point was replaced with the postscript point which was exactly 72 points per inch. Some applications still allow us to use the old typographer points if we so choose but no one does.

Although there are many techological advances I lament (color profiles to name just one), the evolution of point and the em space were truly advances.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question