Solved

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

Posted on 2006-10-30
6
3,003 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
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

809 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